今天在项目中遇到的一个问题：点击按钮使用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执行顺序问题还是浏览器渲染机制问题或是其他什么原因，希望了解的大神指点一二~~~
时间： 2024-10-24 16:27:09