鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用
Posted 前端潘潘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用相关的知识，希望对你有一定的参考价值。
今天在项目中遇到的一个问题：点击按钮使用layer弹框弹出一张图片，需要加一个鼠标滚轮放大缩小，图片也跟着放大缩小的功能。于是在网上找了一个demo。
DEMO:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>图片放大缩小</title> 5 <style type="text/css"> 6 div{ 7 width: 100px; 8 height: 100px; 9 } 10 </style> 11 <script type="text/javascript" src="jquery-1.9.1.js"></script> 12 <script type="text/javascript" src="layer.js"></script> 13 </head> 14 <body> 15 <div id="mqp"> 16 <img id="myimage" src="kmlogo.png" alt="my image" /> 17 </div> 18 <script type="text/javascript"> 19 var myimage = document.getElementById("myimage"); 20 // IE9, Chrome, Safari, Opera 21 myimage.addEventListener("mousewheel", MouseWheelHandler, false); 22 // Firefox 23 myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 24 myimage.attachEvent("onmousewheel", MouseWheelHandler); 25 function MouseWheelHandler(e) { 26 // cross-browser wheel delta 27 var e = window.event || e; // old IE support 28 var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 29 myimage.style.width = Math.max(50, Math.min(1800, myimage.width + (30 * delta))) + "px"; 30 return false; 31 } 32 </script> 33 </body> 34 </html>
这个例子没有引用layer，而是直接显示图片，滚轮放大缩小图片是正常的，当加入layer后，代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>??????????</title> 5 <style type="text/css"> 6 div{ 7 width: 100px; 8 height: 100px; 9 } 10 </style> 11 <script type="text/javascript" src="jquery-1.9.1.js"></script> 12 <script type="text/javascript" src="layer.js"></script> 13 </head> 14 <body> 15 <div id="mqp"> 16 <img id="myimage" src="kmlogo.png" alt="my image" /> 17 </div> 18 <script type="text/javascript"> 19 layer.open({ 20 type: 1, 21 shade: false, 22 title: false, //不显示标题 23 content: document.getElementById("mqp"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响 24 cancel: function(){ 25 layer.msg(‘捕获就是从页面已经存在的元素上，包裹layer的结构‘, {time: 5000, icon:6}); 26 } 27 }); 28 29 var myimage = document.getElementById("myimage"); 30 // IE9, Chrome, Safari, Opera 31 myimage.addEventListener("mousewheel", MouseWheelHandler, false); 32 // Firefox 33 myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 34 myimage.attachEvent("onmousewheel", MouseWheelHandler); 35 function MouseWheelHandler(e) { 36 // cross-browser wheel delta 37 var e = window.event || e; // old IE support 38 var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 39 myimage.style.width = Math.max(50, Math.min(1800, myimage.width + (30 * delta))) + "px"; 40 return false; 41 } 42 </script> 43 </body> 44 </html>
使用layer后，图片无法随着鼠标滚轮的放大、缩小做出相应的变化，于是就想是不是layer把鼠标滚轮事件屏蔽掉了，问同事并在网上搜索了一通，没有找到好的解决方案，后来临近下班时，就想颠倒一下layer的顺序看看，代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>??????????</title> 5 <style type="text/css"> 6 div{ 7 width: 100px; 8 height: 100px; 9 } 10 </style> 11 <script type="text/javascript" src="jquery-1.9.1.js"></script> 12 <script type="text/javascript" src="layer.js"></script> 13 </head> 14 <body> 15 <div id="mqp"> 16 <img id="myimage" src="kmlogo.png" alt="my image" /> 17 </div> 18 <script type="text/javascript"> 19 var myimage = document.getElementById("myimage"); 20 // IE9, Chrome, Safari, Opera 21 myimage.addEventListener("mousewheel", MouseWheelHandler, false); 22 // Firefox 23 myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 24 myimage.attachEvent("onmousewheel", MouseWheelHandler); 25 function MouseWheelHandler(e) { 26 // cross-browser wheel delta 27 var e = window.event || e; // old IE support 28 var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 29 myimage.style.width = Math.max(50, Math.min(1800, myimage.width + (30 * delta))) + "px"; 30 return false; 31 } 32 33 layer.open({ 34 type: 1, 35 shade: false, 36 title: false, //不显示标题 37 content: document.getElementById("mqp"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响 38 cancel: function(){ 39 layer.msg(‘捕获就是从页面已经存在的元素上，包裹layer的结构‘, {time: 5000, icon:6}); 40 } 41 }); 42 </script> 43 </body> 44 </html>
结果鼠标滚轮使图片放大缩小功能正常了，然后就想这是为什么呢？是因为js执行顺序问题还是浏览器渲染机制问题或是其他什么原因，希望了解的大神指点一二~~~
以上是关于鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用的主要内容，如果未能解决你的问题，请参考以下文章