需要进行图片缩放,代码如下
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 4 <title> 图片放大缩小</title> 5 <script type="text/javascript"> 6 var scrollFunc = function (e) { 7 var direct = 0; 8 e = e || window.event; 9 var img = document.getElementById("zoom"); 10 var zoom = parseInt(img.style.zoom, 10); 11 if (isNaN(zoom)) { 12 zoom = 100; 13 } 14 if (e.wheelDelta) { 15 zoom += e.wheelDelta / 120; 16 if (zoom > 10) img.style.zoom = zoom + "%"; 17 } 18 else 19 if (e.detail) { 20 zoom += -e.detail / 3; 21 if (zoom > 10) 22 img.style.MozTransform = scale(zoom + "%").style.MozTransformOrigin = TopLeft; 23 } 24 ScrollText(direct); 25 } 26 if (document.addEventListener) { 27 document.addEventListener('DOMMouseScroll', scrollFunc, false); 28 } 29 window.onmousewheel = document.onmousewheel = scrollFunc; 30 </script> 31 </head> 32 <body> 33 <div id="zoom" style="position:relative;width:auto; display:inline-block !important; display:inline; border:1px solid #F00;"> 34 <img src="1.jpg" class="one" /> 35 <div style="position:absolute;width:70px;left:50%;top:50%; border:1px solid #F00;"> 36 <img src="2.jpg"> 37 </div> 38 </div> 39 </body> 40 </html>
22行这点不知道该怎么写了,
img.style.MozTransform = scale(zoom + "%").style.MozTransformOrigin = TopLeft;这个火狐还是不兼容
img.style.zoom = zoom + "%"
img.style.transform = "scale("+zoom/100+")";
transform 赋值应为字符串,还有img.style.zoom虽然不支持,但是要用来记录缩放的值
谢谢啦