JS Mouse control picture effects, wheel control zoom, zoom, mouse drag, focus ...

Project needs to do a JS control image of the special effects, wheel control zoom, zoom, mouse drag and other effects, online find methods, various error, incompatible ... Finally, I have developed a set of options as follows:

The code is copied directly from the project and is not organized.

<script type= "Text/javascript" >//image effects by Jifei_mei        //picture size, record size before zooming in or out of a picture        varPic_size ={width:0, Height:0        }; //Bound wheel scrolling events        if(Window.addeventlistener) {Window.addeventlistener (' Dommousescroll ',function(event) {varTargetid = $ (event.target). attr ("id") + '; if(targetid== ' Currentpicture ' | | targetid== ' currentpictureimg ') {decidesignal (event.detail); }            }, false); } Window.onmousewheel= Document.onmousewheel =function(Event) {event= Event | |window.event; varTargetid = event.srcelement.id+ "; if(targetid== ' Currentpicture ' | | targetid== ' currentpictureimg ') {decidesignal (Event.wheeldelta); }        }        //Judging Action direction: 0 Illegal, 1 up, 1 down        functiondecidesignal (signal) {vareventsignal = 0; if(signal==-3| | signal==120| | signal==360) {eventsignal= 1; }            if(signal==3| | signal==-120| | signal==-360) {eventsignal=-1;        } resizeimage (eventsignal); }        functionResizeimage (eventsignal) {//Illegal Operation! Do not process            if(eventsignal==0){            }            varHeight = $ ("#currentPictureImg"). attr ("height")); varwidth = $ ("#currentPictureImg"). attr ("width"); varh =parseint (height); varW =parseint (width); Pic_size={width:$ ("#currentPictureImg"). Width (), height:$ ("#currentPictureImg"). Height ()}; //Zoom in            if(eventsignal>0) {h+ = 5; W+ = 5; }            //Zoom Out            if(eventsignal<0) {h-= 5; W-= 5; if(h==0) {h= 5; }                if(w==0) {W= 5; }            }            //change the size of a picture$ ("#currentPictureImg"). attr ("height", H + "%"); $("#currentPictureImg"). attr ("width", w+ "%");        Changeimagepositiontooldimagecenter (); }        //Focus the center of the image on the image center before zooming in        functionChangeimagepositiontooldimagecenter () {varleft = parseint ($ ("#currentPictureImg"). CSS (' left ')); vartop = parseint ($ ("#currentPictureImg"). CSS (' top ')); varHeight = $ ("#currentPictureImg"). Height (); varwidth = $ ("#currentPictureImg"). width (); Left= (pic_size.width-width)/2+left;            top = (pic_size.height-height)/2+top; $ ("#currentPictureImg"). css ({' Left ': left+ ' px ',                ' Top ': top+ ' px '            }); }        //focus the picture in the middle        functionChangeimagepositiontocenter () {varHeight = $ ("#currentPictureImg"). Height ();//Picture Width High            varwidth = $ ("#currentPictureImg"). width (); varH = $ ("#currentPicture"). Height ();//Picture Display area width height            varW = $ ("#currentPicture"). width (); varleft = (w-width)/2;vartop = (h-height)/2; $ ("#currentPictureImg"). css ({' Left ': left+ ' px ',                ' Top ': top+ ' px '            }); }        //Mouse Drag Events        varIsie = (window.navigator.userAgent.indexOf ("IE") = =-1)?false:true;//determine if it is IE        varIsie_8 =-1; if(Navigator.userAgent.indexOf ("MSIE") >0){              if((Navigator.userAgent.indexOf ("MSIE 8.0") >0) | | (Navigator.userAgent.indexOf ("MSIE 9.0") >0 &&!window.innerwidth)) {Isie_8= 8; }Else {                varIe_v = navigator.userAgent.substring (navigator.userAgent.indexOf ("MSIE")). Substring (5,8); Isie_8=parseint (IE_V); }         }        //determines whether to press the left ARROW key (drag on)        functionIsleftbutton (btn) {if(isie&&isie_8<=8) {                if(BTN = = 1)                    return true; Else                    return false; } Else {                if(BTN = = 0)                    return true; Else                    return false; }        }        varLeftmousedown =false;//whether to press the left mouse button        varpos ={x:0, y:0        }; functionbind (EV, func) {if(!window.addeventlistener) {header.attachevent ("On" +ev, func); } Else{header.addeventlistener (EV, func,false); }        }        //Mouse-pressed events        functionMouseDown (Event) {event= Event | |window.event; if(!Isleftbutton (Event.button))return; Leftmousedown=true; if(Event.preventdefault) {event.preventdefault (); }            Else{Event.returnvalue=false; } POS={x:event.clientx, y:event.clienty}; }        //Mouse Release Event        functionMouseUp (Event) {event= Event | |window.event; Leftmousedown=false; }        //Mouse Move Event        functionMouseMove (Event) {event= Event | |window.event; if(!Leftmousedown)return; varleft = parseint ($ ("#currentPictureImg"). CSS (' left ')); vartop = parseint ($ ("#currentPictureImg"). CSS (' top '));            Console.info (left); Left= left+ (event.clientx-pos.x); Top= top+ (event.clienty-pos.y); $("#currentPictureImg"). css ({' Left ': left+ ' px ',                ' Top ': top+ ' px '            }); POS={x:event.clientx, y:event.clienty}; }        if(Isie) {$ ("#currentPictureImg"). Bind (' MouseDown ',function(Event) {event= Event | |window.event;            MouseDown (event);            }); $("#currentPictureImg"). Bind (' MouseUp ', mouseUp); $("#currentPictureImg"). Bind (' MouseMove ', MouseMove); }        $("#currentPicture"). Bind (' MouseDown ', MouseDown); $("#currentPicture"). Bind (' MouseUp ', mouseUp); $("#currentPicture"). Bind (' MouseMove ', MouseMove); //navigation icon Click event$ ("#moveup"). Click (function(){            vartop = parseint ($ ("#currentPictureImg"). CSS (' top ')); Top= top-50; $("#currentPictureImg"). CSS (' top ', top+ ' px '));        }); $("#movedown"). Click (function(){            vartop = parseint ($ ("#currentPictureImg"). CSS (' top ')); Top= Top+50; $("#currentPictureImg"). CSS (' top ', top+ ' px '));        }); $("#moveleft"). Click (function(){            varleft = parseint ($ ("#currentPictureImg"). CSS (' left ')); Left= left-50; $("#currentPictureImg"). CSS (' left ', left+ ' px '));        }); $("#moveright"). Click (function(){            varleft = parseint ($ ("#currentPictureImg"). CSS (' left ')); Left= Left+50; $("#currentPictureImg"). CSS (' left ', left+ ' px '));        }); $("#zoomin"). Click (function() {Resizeimage (1);        }); $("#zoomout"). Click (function() {Resizeimage (-1);        }); $("#movecenter"). Click (function() {changeimagepositiontocenter ();        }); $("#zoomf"). Click (function(){            $("#currentPictureImg"). attr ("height", "100%"); $("#currentPictureImg"). attr ("width", "100%"); $("#currentPictureImg"). css ({' Left ': ' 0px ',                ' Top ': ' 0px '            }); });</script><div id= "Currentpicture" >
<!--floating layer navigation icon--><div id= "mydiv" style= "position:absolute;z-index:999;left:270px;top:90px;" ><table><tr><td></td><td><a href= "javascript:void (0);" id= "MoveUp" >< IMG src= "up.gif"/></a></td><td></td></tr><tr><td style= "padding-right : 4px; " ><a href= "javascript:void (0);" id= "MoveLeft" ></a></td><td> <a href= "javascript:void (0);" id= "Movecenter" ></a></td> <td style= " padding-left:4px; " ><a href= "javascript:void (0);" id= "MoveRight" ></a></td></tr > <tr><td></td><td><a href= "javascript:void (0);" id= "MoveDown" ></a></td><td></td></tr><tr><td></td><td> <a href= "javascript:void (0);" id= "ZoomIn" ></a></td><td></td></tr><tr><td></td><td><a href= "javascript:void (0);" id= " Zoomf "></a></td><td></td></tr><tr><td> </td><td><a href= "javascript:void (0);" id= "Zoomout" ></a> </td><td></td></tr></table> </div></div>

Code a bit long ╮ (╯_╰) ╭ since it is special effects, it is necessary to duang, have patience to test it! Of course there are many areas that need to be optimized to be able to read

IE, Firefox, Chrome, windows of the world No problem

JS Mouse control picture effects, wheel control zoom, zoom, mouse drag, focus ...