mouse wheel zoom image js
Intorduce
Mouse wheel zoom image js , It’s simple , easy to use and compliant with IE6-8,FF,Chrome,Opera,Safari . no more than 50 lines of codes .
How to use ?
Insert following codes between <head> and </head>
<script type="text/javascript"> (function(){ var zooming=function(e){ e=window.event ||e; var o=this,data=e.wheelDelta || -e.detail*40,zoom,size; if(!+'\v1'){//IE zoom = parseInt(o.style.zoom) || 100; zoom += data / 12; if(zoom > zooming.min) o.style.zoom = zoom + '%'; e.returnValue=false; }else { size=o.getAttribute("_zoomsize").split(","); zoom=parseInt(o.getAttribute("_zoom")) ||100; zoom+=data/12; if(zoom>zooming.min){ o.setAttribute("_zoom",zoom); o.style.width=size[0]*zoom/100+"px"; o.style.height=size[1]*zoom/100+"px"; } e.preventDefault(); e.stopPropagation();//for firefox3.6 } }; zooming.add=function(obj,min){// first parameter is for the image need to zoom ,min define the image zoom size ,default to 50 zooming.min=min || 50; obj.onmousewheel=zooming; if(/Firefox/.test(navigator.userAgent))//if Firefox obj.addEventListener("DOMMouseScroll",zooming,false); if(-[1,]){//if not IE obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight); } }; window.onload=function(){//must be onload , in order to get the image size zooming.add(document.getElementById("test")); } })() </script>
Please take a notice to zooming.add(document.getElementById(“test”)); ,that’s where you need change to add your image which suposed to be zoom. the ‘test’ is the image id.
html body codes :
<img alt='' id='test' src="../demo/pflimg/bcms.gif" />Online demo
mouse wheel zoom image js

Mouse over on the image and scroll your mouse wheel , ye ! that’s what you are looking for , enjoy it !
, I'm a freelancer and available now,if need help just contact me without hesitation.
3 Responses to “mouse wheel zoom image js”
Leave a Reply
-
Search for:
-
Sponsor
Categories
- apache (2)
- css xhtml (10)
- html5 (1)
- javascript (3)
- jquery (5)
- magento (3)
- mysql (1)
- php (1)
- SEO Friendly (6)
- Tools (3)
- w3c validation (4)
- Wordpress (4)


















Great article, i
hope can know much information About it!
Thank you for your great
content.
This is very helpful ,
Thanks for the script !!