JS面向对象方法 面向对象方法实现橱窗式图面预览以及放大功能

Posted 2020-09-11 U.m.a

 效果图：

 

 

html结构如下：

<div id="preview">
                    <div id="mediumDiv">
                        <img id="mImg" src="images/products/product-s1-m.jpg"/>
                        <div id="mask"></div>
                        <div id="superMask"></div>
                    </div>
                    <div id="largeDiv"></div>
                    <h1>
                        <a class="backward_disabled"></a>
                        <a class="forward"></a>
                        <ul id="icon_list">
                                <li><img src="images\\products\\product-s1.jpg" /></li>
                                <li><img src="images\\products\\product-s2.jpg" /></li>
                                <li><img src="images\\products\\product-s3.jpg" /></li>
                                <li><img src="images\\products\\product-s4.jpg" /></li>
                                <li><img src="images\\products\\product-s1.jpg" /></li>
                                <li><img src="images\\products\\product-s2.jpg" /></li>
                                <li><img src="images\\products\\product-s3.jpg" /></li>
                                <li><img src="images\\products\\product-s4.jpg" /></li>
                        </ul>
                    </h1>
 </div>

JS部分：

var pPhoto = {
    LIWIDTH : 62, //每个小图片的li的固定宽度
    moved : 0, //记录左移小图片的个数
    count : 0, //记录小图片的总数
    ul: null,   //小图父元素ul
    btnL: null,   //左边按钮 控制右移
    btnR : null,
    superMark :null,
    SUPERWIDTH : 350, //supermask的宽高
    SUPERHEIGHT :350,
    MASKWIDTH:175,      //遮罩层mask的宽高
    MASKHEIGHT:175,
    inti : function (){ //初始化方法
        this.ul = $("#icon_list")[0];
        this.ul.onmouseover =this.changeMImg;
        this.btnL = this.ul.parentNode.$("a")[0];
        this.btnR = this.ul.parentNode.$("a")[1];
        this.btnR.onclick=this.btnL.onclick=function () {
            pPhoto.move(this); //将btn通过此时的this作为参数传入 move方法
            //将move的this指向pPhoto对象
        };
        this.count = this.ul.$("li").length;
        //图片放大效果遮罩层
        this.supermask = $("#superMask")[0];
        this.supermask.onmouseover=this.supermask.onmouseout=this.showMask;
        this.supermask.onmousemove = function(){
            var e = window.event || arguments[0];
            pPhoto.zoom(e);
        }
    },
    move : function (btn){//移动方法
        if(!btn.className.endsWith("_disabled")) {
            if (btn == this.btnR) { //判断当前btn的左右
                this.ul.style.left = -(this.LIWIDTH * (++this.moved) - 20) + "px";
                //-20  根据css原left属性进行修正
            } else {
                this.ul.style.left = -(this.LIWIDTH * (--this.moved) - 20) + "px";
            }
            this.btnEnable();
        }
    },
    btnEnable : function (){//修改按钮状态方法   this-->pPhoto
        if(this.moved==0){
            this.btnL.className+="_disabled";
        }else if(this.count-this.moved==5){
            this.btnR.className+="_disabled";
        }else{
            this.btnL.className=this.btnL.className.replace("_disabled","");
                                                //replace()方法并不能直接修改calssname的属性值 需要重新赋值
            this.btnR.className=this.btnR.className.replace("_disabled","");
        }
    },
    changeMImg :function (){ //this-->ul
        //获取事件对象
        var e = window.event || arguments[0]; 
        //获取目标对象
        var src=e.srcElemnt||e.target;
        if(src.nodeName=="IMG"){
            var path = src.src;
            var i = path.lastIndexOf(".");
            $("#mImg")[0].src=path.slice(0,i)+"-m"+path.slice(i);
        }
    },
    showMask : function(){
        var mask = $("#mask")[0];
        var style = getComputedStyle(mask);
        var largeDiv = $("#largeDiv")[0];
        largeDiv.style.display=mask.style.display=style.display=="none"?"block":"none";
        if(largeDiv.style.display=="block"){
            var path = $("#mImg")[0].src;
            var i=path.lastIndexOf(".");
            $("#largeDiv")[0].style.backgroundImage="url(\'"+path.slice(0,i-1)+"l"+path.slice(i)+"\')";
        }
    },
    zoom :function (e){
        var x=e.offsetX
        var y=e.offsetY;
        var mLeft = x-this.MASKWIDTH/2;
        var mTop = y-this.MASKHEIGHT/2;
        mLeft<0 && (mLeft=0);
        mLeft>this.SUPERWIDTH-this.MASKWIDTH && (mLeft=this.SUPERWIDTH-this.MASKWIDTH);
        mTop<0 && (mTop=0);
        mTop>this.SUPERHEIGHT-this.MASKHEIGHT &&(mTop=this.SUPERHEIGHT-this.MASKHEIGHT);
        var mask = $("#mask")[0];
        mask.style.left=mLeft+"px";
        mask.style.top=mTop+"px";
        var largeDiv = $("#largeDiv")[0]
        largeDiv.style.backgroundPosition=-mTop*2+"px "+-mLeft*2+"px";
    }
}

Tips：

　　*面向对象方法在编写页面中某一块交互功能时，能有效的避免因代码过多而造成的变量污染，更有助于代码的可读性和重用性。

　　*this 很好很强大 在面向对象方法中如果需要指定this的指向可以使用以下方法：

this.btnR.onclick=this.btnL.onclick=function () {
            pPhoto.move(this); //将btn通过此时的this作为参数传入 move方法
            //将move的this指向pPhoto对象
 };

　　*事件对象e 只能在事件绑定函数中获得 ：

 this.supermask.onmousemove = function(){
            var e = window.event || arguments[0];
            //获取事件对象e 作为参数传递给 放大方法zoom;
            pPhoto.zoom(e);
 }
 zoom :function (e){ //zoom函数类无法获得 sueromask元素的事件对象e
        var x=e.offsetX
        var y=e.offsetY;
        var mLeft = x-this.MASKWIDTH/2;
        var mTop = y-this.MASKHEIGHT/2;
        mLeft<0 && (mLeft=0);
        mLeft>this.SUPERWIDTH-this.MASKWIDTH && (mLeft=this.SUPERWIDTH-this.MASKWIDTH);
        mTop<0 && (mTop=0);
        mTop>this.SUPERHEIGHT-this.MASKHEIGHT &&(mTop=this.SUPERHEIGHT-this.MASKHEIGHT);
        var mask = $("#mask")[0];
        mask.style.left=mLeft+"px";
        mask.style.top=mTop+"px";
        var largeDiv = $("#largeDiv")[0]
        largeDiv.style.backgroundPosition=-mTop*2+"px "+-mLeft*2+"px";
    }