JS Object-oriented method (ii) The object-oriented method realizes the display window Surface preview and the magnification function

：

The HTML structure is as follows:

<DivID= "Preview">                    <DivID= "Mediumdiv">                        <imgID= "Mimg"src= "Images/products/product-s1-m.jpg"/>                        <DivID= "Mask"></Div>                        <DivID= "Supermask"></Div>                    </Div>                    <DivID= "Largediv"></Div>                    <H1>                        <aclass= "backward_disabled"></a>                        <aclass= "Forward"></a>                        <ulID= "Icon_list">                                <Li><imgsrc= "Images\products\product-s1.jpg" /></Li>                                <Li><imgsrc= "Images\products\product-s2.jpg" /></Li>                                <Li><imgsrc= "Images\products\product-s3.jpg" /></Li>                                <Li><imgsrc= "Images\products\product-s4.jpg" /></Li>                                <Li><imgsrc= "Images\products\product-s1.jpg" /></Li>                                <Li><imgsrc= "Images\products\product-s2.jpg" /></Li>                                <Li><imgsrc= "Images\products\product-s3.jpg" /></Li>                                <Li><imgsrc= "Images\products\product-s4.jpg" /></Li>                        </ul>                    </H1> </Div>

JS section:

varPphoto ={liwidth:62,//The fixed width of li for each small picturemoved:0,//record the number of left-shifted small picturescount:0,//record the total number of small picturesUl:NULL,//Small picture parent element ulBTNL:NULL,//left button controls right shiftBTNR:NULL, Supermark:NULL, Superwidth:350,//supermask width and heightsuperheight:350, Maskwidth:165M//the width and height of mask layer maskmaskheight:175, Inti:function(){//Initialize Method         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);//Pass btn to the Move method as a parameter by this time            //The This point of the move points to the Pphoto object        };  This. Count = This. ul.$ ("Li"). length; //image magnification Mask layer         This. Supermask = $ ("#superMask") [0];  This. supermask.onmouseover= This. supermask.onmouseout= This. Showmask;  This. Supermask.onmousemove =function(){            varE = Window.event | | Arguments[0];        Pphoto.zoom (e); }}, move:function(BTN) {//Move Method        if(!btn.classname.endswith ("_disabled")) {            if(BTN = = This. Btnr) {//judging the current btn of the left and right                 This. Ul.style.left =-( This. Liwidth * (+ + This. Moved) + "px"; //-20 correction based on CSS original left property}Else {                 This. Ul.style.left =-( This. Liwidth * (-- This. Moved) + "px"; }             This. btnenable (); }}, Btnenable:function(){//Modify the button state method 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", "" "); //the Replace () method does not directly modify the value of the Calssname property to be re-assigned             This. btnr.classname= This. BtnR.className.replace ("_disabled", "" "); }}, Changemimg:function(){//This-->ul        //Get Event Object        varE = Window.event | | Arguments[0];//get target Object        varsrc=e.srcelemnt| |E.target; if(src.nodename== "IMG"){            varPath =src.src; vari = Path.lastindexof (".")); $("#mImg") [0].src=path.slice (0,i) + "-M" +Path.slice (i); }}, Showmask:function(){        varMask = $ ("#mask") [0]; varstyle =getComputedStyle (mask); varLargediv = $ ("#largeDiv") [0]; LargeDiv.style.display=mask.style.display=style.display== "None"? " Block ":" None "; if(largediv.style.display== "Block"){            varPath = $ ("#mImg") [0].src; varI=path.lastindexof ("."); $("#largeDiv") [0].style.backgroundimage= "url ('" +path.slice (0,i-1) + "L" +path.slice (i) + "')"; }}, Zoom:function(e) {varx=E.offsetxvary=e.offsety; varMleft = X This. MASKWIDTH/2;varMtop = 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); varMask = $ ("#mask") [0]; Mask.style.left=mleft+ "px"; Mask.style.top=mtop+ "px"; varLargediv = $ ("#largeDiv") [0] LargeDiv.style.backgroundPosition=-mtop*2+ "px" +-mleft*2+ "px"; }}

Tips:

* Object-oriented method can effectively avoid the variable pollution caused by too much code when writing an interactive function in the page, which is more helpful to the readability and reusability of the code.

*this is good and powerful. In an object-oriented approach, if you need to specify the point of this, you can use the following methods:

this. btnr.onclick=the btnl.onclick=function  () {            pphoto.move (this  // BTN The Move method by passing this as parameter at this time            // to point to the Pphoto object };

* Event Object E can only be obtained in the event binding function:

  This. Supermask.onmousemove =function(){            varE = Window.event | | Arguments[0]; //Gets the event object E passed as a parameter to the magnification method zoom;Pphoto.zoom (e);} Zoom:function(e) {//the Zoom function class cannot get the event object of the Sueromask element e        varx=E.offsetxvary=e.offsety; varMleft = X This. MASKWIDTH/2;varMtop = 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); varMask = $ ("#mask") [0]; Mask.style.left=mleft+ "px"; Mask.style.top=mtop+ "px"; varLargediv = $ ("#largeDiv") [0] LargeDiv.style.backgroundPosition=-mtop*2+ "px" +-mleft*2+ "px"; }    

JS Object-oriented method (ii) The object-oriented method realizes the display window Surface preview and the magnification function