JS Click on the image to view a larger image, and can be dragged, and the rolling wheel zoom in and zoom out

Jquery

functionHidemax () {$ (". Max_div "). Remove (); $("#Cover_Div"). Hide (); }    functionShowmax (URL) {$ ("#Cover_Div"). Show (); varImage=function(){            returnDocument.createelement ("img"); }          vardiv=function(){            returnDocument.createelement ("div"); }                  vardiv=NewDIV (); varclose_div=NewDIV (); varclose_img=NewImage (); varimg=NewImage (); var_enter=false; $(". Max_div "). Remove (); Div.setattribute ("Class", "Max_div"); Close_div.setattribute ("Class", "Close"); Close_div.setattribute ("Title", "click Close"); Img.setattribute ("Class", "Showmax"); IMG.SRC=URL; CLOSE_IMG.SRC= "Tpl/images/delete.png"; Img.onmouseover=function() {_enter=true; } img.onmouseout=function() {_enter=false; } Close_div.onclick=function() {Hidemax ();            } close_div.appendchild (CLOSE_IMG);            Div.appendchild (IMG);            Div.appendchild (CLOSE_DIV);                        Document.body.appendChild (DIV); //var _z=9999;            varclose=$ (". Close"); $ (document). Ready (function(){             var_move=false;//Move Tag             var_x,_y;//the relative position of the mouse from the upper-left corner of the control             varwd//window$ (". Showmax"). Click (function(){                    //alert ("click");//Click (trigger after release)                 //this.style.cursor = "default";//Mouse Shape                 //this.style.zIndex = 999;}). MouseDown (function(e) {_move=true; WD=$( This); //this.style.cursor = "move";//Mouse Shape                   //this.style.zIndex = _z;//window Hierarchy                   //_z++;_x=e.pagex-(IsNaN (parseint (Wd.css ("left"))? 0:parseint (Wd.css ("left")))); _y=e.pagey-(IsNaN (parseint ("Top")) 0:parseint (Wd.css ("Top")))); C_x=e.pagex-(IsNaN (parseint (Close.css ("left"))? 0:parseint (Close.css ("left")))); C_y=e.pagey-(IsNaN (parseint ("Top")) 0:parseint (Close.css ("Top")))); /*Wd.fadeto (0.25);*///Click to start dragging and display transparently$ (document). MouseMove (function(e) {if(_move) {varx=e.pagex-_x;//calculates the absolute position of the upper-left corner of the control based on the mouse position when moving                            vary=e.pagey-_y; varclosex=e.pagex-c_x; varclosey=e.pagey-c_y; Wd.css ({top:y,left:x});//Control New Locationclose.css ({top:closey,left:closex}); }}). MouseUp (function() {_move=false; /*Wd.fadeto ("Fast", 1);*///stop moving and revert to opaque after releasing the mouse                  });                            });                       }); //$ (". Showmax"). MouseOver (function () {                                varScrollTop =$ (window). scrolltop (); varinittop=scrolltop; varScreenHeight = Window.screen.availHeight;//Get screen height$ (window). Scroll (function() {scrolltop=$ (window). scrolltop (); varW=parseint ($ (". Showmax"). CSS ("width")); varH=parseint ($ (". Showmax"). CSS ("height"))); if(ScrollTop > inittop&&_enter) {                            $(". Showmax"). CSS ({"width": w+number) + "px", "height": h+number (+) + "px"}); Close.css ("Margin-left", (w-125) <125?125: (w-125) + "px"); $ (window). scrolltop (inittop);//Keep scroll bar distance at bottom 0px                        }                         if(ScrollTop <initTop&&_enter) {                            $(". Showmax"). CSS ({"width":(w-28) <280?280: (w-28) + "px", "height":(h-50) <500?500: (h-50) + "px"}); Close.css ("Margin-left", (w-155-28) <125?125: (w-155-28) + "px"); $ (window). scrolltop (inittop);//Keep scroll bar distance at bottom 0px                        }                                        //Inittop=scrolltop;                 }); //})                                                            functionImgdragstart () {return false;}  for(IinchDocument.images) document.images[i].ondragstart=Imgdragstart; }     

Css

. Showmax{padding:5px;Padding-top:30px;Border-radius:3px;position:fixed;Z-index:999991;Top:25%;width:280px;Height:500px; Left:50%;Margin-left:-140px;Background-color:Orange;cursor:Move; }. Max_div{}. Close{Color:#ffffff;position:fixed;Z-index:999992;width:14px;Height:14px;Top:25%; Left:50%;Margin-left:125px;Margin-top:8px;}Li >img:hover{Border:1px solid Orange;cursor:crosshair;}#Cover_Div{position:fixed;Z-index:9999;width:100%;Height:100%; Left:0;Top:0;Min-width:700px;Min-height:740px;Opacity:0.5;Filter:Alpha (opacity =);Background-color:#ffffff; }. Cut{Font-weight:Bold;Font-weight:Normal\0;font-size:18px;Height:30px;Max-height:35px;Color:#FFFFFF;font-family:Regular Script;}

Html

< img   onclick = "showmax (' url") "  src=" url "  style=" Width:288px;height : 216px; " />

JS Click on the image to see a larger image, and you can drag, and the rolling wheel zoom in and zoom out