鼠標滾輪圖片放大縮小功能，使用layer彈框後不起作用
阿新 • • 發佈：2017-06-29
src con ext 顯示 想是 它的 max msg 隨著
今天在項目中遇到的一個問題：點擊按鈕使用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彈框後不起作用