今天在项目中遇到的一个问题：点击按钮使用layer弹框弹出一张图片，需要加一个鼠标滚轮放大缩小，图片也跟着放大缩小的功能。于是在网上找了一个demo。
DEMO:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>图片放大缩小</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="layer.js"></script>
</head>
<body>
<div id="mqp">
<img id="myimage" src="kmlogo.png" alt="my image" />
</div>
<script type="text/javascript">
var myimage = document.getElementById("myimage");
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
myimage.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
myimage.style.width = Math.max(50, Math.min(1800, myimage.width + (30 * delta))) + "px";
return false;
}
</script>
</body>
</html>
这个例子没有引用layer，而是直接显示图片，滚轮放大缩小图片是正常的，当加入layer后，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>�����ַŴ�ͼƬ</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="layer.js"></script>
</head>
<body>
<div id="mqp">
<img id="myimage" src="kmlogo.png" alt="my image" />
</div>
<script type="text/javascript">
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: document.getElementById("mqp"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
}
}); var myimage = document.getElementById("myimage");
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
myimage.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
myimage.style.width = Math.max(50, Math.min(1800, myimage.width + (30 * delta))) + "px";
return false;
}
</script>
</body>
</html>
使用layer后，图片无法随着鼠标滚轮的放大、缩小做出相应的变化，于是就想是不是layer把鼠标滚轮事件屏蔽掉了，问同事并在网上搜索了一通，没有找到好的解决方案，后来临近下班时，就想颠倒一下layer的顺序看看，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>�����ַŴ�ͼƬ</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="layer.js"></script>
</head>
<body>
<div id="mqp">
<img id="myimage" src="kmlogo.png" alt="my image" />
</div>
<script type="text/javascript">
var myimage = document.getElementById("myimage");
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
myimage.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
myimage.style.width = Math.max(50, Math.min(1800, myimage.width + (30 * delta))) + "px";
return false;
} layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: document.getElementById("mqp"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
}
});
</script>
</body>
</html>
结果鼠标滚轮使图片放大缩小功能正常了，然后就想这是为什么呢？是因为js执行顺序问题还是浏览器渲染机制问题或是其他什么原因，希望了解的大神指点一二~~~