Share a central zoom plugin based on jquery click image Zoom is a zoom in when the original image from the location of the animation to zoom in the middle of the screen, support click the image or press the ESC key to close the effect. As follows:
Online preview Source Download
The implemented code.
HTML code:
<Divclass= "Page-body"> <Divstyle= "width:80px; height:80px; margin-right:10px; padding:10px; float:left; Background:green; ">point me to see!!! </Div> <Divstyle= "width:100px; height:50px; position:absolute; right:50px; top:250px; background:red; ">point me to see!!! <Divstyle= "width:80px; height:100px; position:relative; left: -50px; top:200px; padding:10px; margin-left:50px; Background:blue; ">point me to see!!! </Div> </Div> </Div> <Scriptsrc= "Js/zoom.js"></Script> <Script>Document.queryselector ('. Page-body'). AddEventListener ('Click', function(event) {Event.preventdefault (); Zoom.to ({element:event.target}); });</Script>
via:http://www.w2bc.com/article/41800
Click image Center Zoom plug-in zoom based on jquery