Home  >  Article  >  Web Front-end  >  The more convenient onMouseWheel zoom picture effect [original]_image special effects

The more convenient onMouseWheel zoom picture effect [original]_image special effects

WBOY
WBOYOriginal
2016-05-16 19:26:341127browse
Copy code The code is as follows:



< ;meta http-equiv="Content-Type" content="text/html; charset=gb2312">
onMouseWheel zoom image effect-www.jb51.Net
< body>
<script> <br>function bbimg(o) <br>{ <br> var zoom=parseInt(o.style.zoom, 10)||100; <br> zoom =event.wheelDelta/ 12; <br> if (zoom>0) o.style.zoom=zoom '%'; <br>} <br>function addthis() <br>{ <br>var e=window.event?window.event :e; <br>var srcE=e.srcElement?e.srcElement:e.target; <br>if(!srcE) return; <br>//author:reterry(dxy) www.jb51.net welcomes reprinting, Please indicate the source when reprinting. <br>if (String(srcE.tagName).toLowerCase()=='img'){ <br>//alert('OK'); <br>bbimg(srcE) <br>} <br>} <br>function backthis(){ <br>var e=window.event?window.event:e; <br>var srcE=e.srcElement?e.srcElement:e.target; <br>if(!srcE) return ; <br>//author:reterry(dxy) www.jb51.net welcomes reprinting, please indicate the source when reprinting. <br>if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey)){ <br>//alert('OK'); <br>srcE.style .zoom='100%'; <br>}} <br>document.onmousewheel=addthis; <br>document.onmouseout=backthis; <br></script>


Scroll with the mouse wheel to view the effect. Author:reterry(dxy) www.jb51.net welcomes reprinting. Please indicate the source when reprinting.
Hold the ctrl key and move the mouse away from the image to restore the original size


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn