js用面向对象的方法编写放大镜

Posted 2022-12-02 Jmytea

文章目录

• 放大镜
• • OOA
  • OOD
  • OOP

放大镜

随着网上购物的逐渐火热，放大镜在许多的购物平台，广泛的应用。如下图，是京东商城的放大镜，它对用户查看商品的细节，作用很大
下面让我们来看下如何用面向对象的的方法，来编写它。

OOA

在面向对象的程序编写中：最重要的就是面向对象过程的分析，

1. 元素选择
2. 事件驱动
3. 元素隐藏
4. 小图移动 大图跟随

OOD

面对对象设计：首先建一个构造函数，并且实例化，人后根据OOA 编写原型对象

OOD
        function Magnifier()

        
        Magnifier.prototype = 
            constructor : Magnifier,
            //初始化
            init : function(),
            //事件绑定
            bindEvent:function(),
            //元素隐藏
            eleToggle:function(),
            //小图移动 大图跟随
            eleMove:function(),

        

OOP

面向对象编程：在前两步完成之后，我们就可以进行编程了，不过在编程中我们也会发现，在前期分析的不足，实时改正就好
下面是我所实现的效果图

下面是我的简单布局：便于你解读后续代码

<div class="small">
		<img src="images/small.jpg" alt="">
		<span class="grayBox"></span>
	</div>
	<div class="big">
		<img src="images/big.jpg" alt="">
    </div>
    <div class="xsmall">
		<img src="images/xsmall.jpg" alt="">
    </div>
    <div class="xsmall2">
		<img src="images/xsmall2.jpg" alt="">
    </div>

CSS样式代码

*
	margin: 0;
	padding: 0;


.small 
	width: 350px;
	height: 350px;
	position: relative;
	margin-left: 200px;
	margin-top: 100px;
	border:4px solid #ddd;
	box-shadow: 0 0 5px rgba(0,0,0,.5);

.small img
	width: 100%;
	height: 100%;

.small .wrap
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;


.small .grayBox
	display: none;
	width: 100px;
	height: 100px;
	/* background-image: url(../images/timg.jpg); */
	background-size:400px 400px;
	background-position: 0 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0;
	top: 0;
	

.big
	width: 500px;
	height: 500px;
	position: absolute;
	left: 700px;
	top: 100px;
	border:1px solid #f10;
	display: none;
	overflow: hidden;

.big img
	position: absolute;


.xsmall 
	width: 50px;
	height: 50px;
	position: absolute;
	left :200px;
	top:462px;
	border:2px solid #ddd;

.xsmall2 
	width: 50px;
	height: 50px;
	position: absolute;
	left :255px;
	top:462px;
	border:2px solid #ddd;

下面是js的详细代码，便于读者进行查看

// OOP : 
	function Magnifier(options)
            this.init(options)
        
        Magnifier.prototype = 
            constructor : Magnifier,
            //初始化
            init : function(options)
                for(var attr in options)
                    this[attr+"_ele"] = this.$(options[attr])
                
                //只获得一次，节省性能
                this.small_box_offset = 
                    left:this.small_box_ele.offsetLeft,
                    top :this.small_box_ele.offsetTop,
                    //offsetWidth:取值时带有padding和border的宽度 去px
                    width:parseInt(getComputedStyle(this.small_box_ele).width),
                    height:parseInt(getComputedStyle(this.small_box_ele).height),
                
                // console.log(this.small_box_offset)
                //因为初始为display：none,offset的测量为0，要用getComputedStyle;
                this.cutting_box_offset = 
                    width:parseInt( getComputedStyle(this.cutting_box_ele).width),
                    height:parseInt( getComputedStyle(this.cutting_box_ele).height)

                
                // console.log(this.cutting_box_offset);
                //this.big_box_ele的宽高
                this.big_box_offset = 
                    width: parseInt(getComputedStyle(this.big_box_ele).width),
                    height:parseInt(getComputedStyle(this.big_box_ele).height)
                
                // console.log(this.big_box_offset)
                //是否移入放大镜
                this.magnifier_start = false;
                this.bindEvent();
                this.scaleBigImg();
            ,
            //元素选择功能
            $:function(selector)
                return document.querySelector(selector)
            ,
            //事件绑定
            bindEvent:function()
                //显示
                this.small_box_ele.addEventListener("mouseover" ,function()
                    this.magnifier_start = true;
                    this.eleToggle("show")
                .bind(this));
                //隐藏
                this.small_box_ele.addEventListener("mouseout" ,function()
                    this.magnifier_start = false;
                    this.eleToggle("hide")
                .bind(this))
                //元素运动
                this.small_box_ele.addEventListener("mousemove" ,function(evt)
                    var e = evt ||event;
                    var x = e.clientX;
                    var y = e.clientY;
                    this.res = this.factoryPosition(x , y)
                    // console.log(x ,y)
                    this.eleMove(this.res)
                .bind(this));
                // 滚轮事件;
                this.small_box_ele.addEventListener("mousewheel" , function( evt )
                    if(!this.magnifier_start) return false 
                    var e = evt || event;
                    // 判定向上还是向下;
                    this.changeCutBoxScale( e.wheelDelta > 0 ? "narrow" : "large" );
                .bind(this));
            ,
            //元素隐藏
            eleToggle:function(type)
                this.cutting_box_ele.style.display = type === "show" ? "block" :"none"
                this.big_box_ele.style.display = type === "show" ? "block" :"none"
            ,
            //小图移动 大图跟随
            eleMove:function(position_obj)
                this.cutting_box_ele.style.left =position_obj.x + "px";
                this.cutting_box_ele.style.top = position_obj.y + "px";
                //右侧大图跟随运动
                // 元素运动 : 
                this.big_img_ele.style.left = -position_obj.xp * this.big_img_boundary.left_max + "px";
                this.big_img_ele.style.top  = -position_obj.yp * this.big_img_boundary.top_max + "px";
            ,
            //处理 x ，y
            factoryPosition:function(x,y)
                var _left = x - this.small_box_offset.left - this.cutting_box_offset.width / 2;
                var _top  = y - this.small_box_offset.top - this.cutting_box_offset.height / 2;
                // console.log(_left ,_top)
                //边界检测
                var _left_max = this.small_box_offset.width - this.cutting_box_offset.width;
                var _top_max = this.small_box_offset.height - this.cutting_box_offset.height;
                // console.log(_left_max,_top_max)
                _left = _left <= 0 ? 0 : _left;
                _left = _left >= _left_max ? _left_max :_left;
                _top  = _top <= 0 ? 0 : _top;
                _top  = _top >= _top_max ? _top_max : _top;
                return
                    x: _left,
                    y: _top,
                    xp:_left / _left_max,
                    yp:_top / _top_max
                
            ,
            scaleBigImg:function()
                //放大的倍数
                var width_p = this.big_box_offset.width /this.cutting_box_offset.width;
                var height_p = this.big_box_offset.height /this.cutting_box_offset.height;
                //右侧大图的宽高
                this.big_img_offset = 
                    width: width_p * this.small_box_offset.width,
                    height: height_p * this.small_box_offset.height,
                ;
                //计算大图运动的边界
                this.big_img_boundary = 
                    left_max :this.big_img_offset.width - this.big_box_offset.width,
                    top_max :this.big_img_offset.height - this.big_box_offset.height,
                ;
                this.big_img_ele.style.width = this.big_img_offset.width + "px";
                this.big_img_ele.style.height = this.big_img_offset.height + "px";
            ,
            changeCutBoxScale : function( type )
			switch ( type ) 
				case "large":
					// console.log("放大");
					this.cutting_box_offset.width += 2;
					this.cutting_box_offset.height += 2;
                    
                    this.cutting_box_offset.width = this.cutting_box_offset.width >= this.small_box_offset.width ? this.small_box_offset.width : this.cutting_box_offset.width
                    this.cutting_box_offset.height = this.cutting_box_offset.height >= this.small_box_offset.height ? this.small_box_offset.height : this.cutting_box_offset.height
                    
                    this.res.x --;
					this.res.y --;
				
					break;
				case "narrow":
					this.cutting_box_offset.width  -= 2;
					this.cutting_box_offset.height -= 2;
					// 小盒子的位移;
					this.res.x ++;
					this.res.y ++;
					break;
				default:
					break;
			

                this.cutting_box_ele.style.width = this.cutting_box_offset.width + "px";
                this.cutting_box_ele.style.height = this.cutting_box_offset.height + "px";

                // 位置改变之后，调用相应的比例计算工具;
                this.scaleBigImg();
                // 重新进行大图运动的计算;
			    this.eleMove(this.res);
		
	

        
        new Magnifier(
            small_box: ".small",
            cutting_box:".grayBox",
            big_box:".big",
            big_img:".big img"
        )
        var btns = document.querySelectorAll(".btn");
        var imgs = document.querySelectorAll(".big img,.small img");
        // console.log(imgs);
        for(var i = 0 ; i < btns.length ; i ++)
            btns[i].onclick = function()
                var src = this.getAttribute("data-src");
                // console.log(src);
                for(var k = 0 ; k < imgs.length ; k ++)
                    imgs[k].src = src;
                
            
        
        var small_img = document.querySelector(".small img");
        var big_img    = document.querySelector(".big img");
        //下方小图
        var xsmall_ele = document.querySelector(".xsmall")
        var xsmall2_ele = document.querySelector(".xsmall2")
       
        xsmall_ele.addEventListener("mouseover" ,function()
            small_img.src = "images/small.jpg";
            big_img.src   = "images/big.jpg"
        )
        
        xsmall2_ele.addEventListener("mouseover" ,function()
            small_img.src = "images/small2.jpg";
            big_img.src   = "images/big2.jpg"
        )