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

鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用的更多相关文章

  1. 自定义mousewheel事件，实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

  2. [Unity3D]Unity3D游戏开发之鼠标滚轮实现放大缩小

    今天为大家分享的是在Rpg游戏中十分常见的鼠标滚轮调整摄像机视野效果.首先我们先创建一个游戏场景: 接下来我们编写一段脚本代码: [csharp] view plaincopyprint" ...

  3. mxGraph画图区域使用鼠标滚轮实现放大/缩小

    // 重写鼠标滚轮事件 mxEvent.addMouseWheelListener = function (funct) { } // 添加初次载入事件 window.onload = functio ...

  4. wpf下的图片放大缩小

    WPF下实现图片的放大缩小移动   在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动.下面我们在WPF中实现这个功能 ...

  5. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  6. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  7. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  8. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

  9. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

随机推荐

  1. 北京赛车PK10 幸运飞艇 重庆时时彩 PC蛋蛋 快乐8 福彩3D 十分彩

    QQ:1395239152 2017-3.14最新修复完整运营版时时彩源码PC+手机版本功能齐全 重庆时时彩是一种经中国国家财政部批准,重庆市福利彩票发行中心承销的福彩快开彩票,2元1注,分为&quo ...

  2. Item 27: 明白什么时候选择重载，什么时候选择universal引用

    本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 Item 26已经解释了,不管是对全局函数还是成员 ...

  3. on方法使用注意事项

    on(eventType,[childSelector],[data],fn) 采用事件委托机制绑定事件,好处是子元素动态加入时无需再次绑定. on方法可以传入childSelector指定添加事件处 ...

  4. Word Ladder II 2015年6月4日

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  5. 多线程之Parallel类

    Parallel类是对线程的一个抽象.该类位于System.Threading.Tasks名称空间中,提供了数据和任务并行性. Paraller类定义了数据并行地For和ForEach的静态方法,以及 ...

  6. JMeter-Eclipse添加自定义函数 MD5加密 32位和16位

    最近公司的接口都是MD5  16位加密,所以要使用加密功能. 之前也做过加密,因为用的比较少,所以是写了一个加密方法,导出JAR包,调用的.用起来需要很多设置,并且换算效率也不高.听前同事说,jmet ...

  7. 忘记block格式 xib加载没有计算导航栏和tabbar的大小

    敲inlineBlock xib加载没有计算导航栏和tabbar的大小 /将这个属性改为no self.tabBarController.tabBar.translucent = NO; 判断优化,两 ...

  8. android学习-第一讲

    一.基础View控件 View类的常见XML属性,对应发放及说明 每个界面控件都需要设置Android:layout_height,Android:layout_width,指定控件的高度和宽度.通常 ...

  9. hexo摸爬滚打之进阶教程

    本文首发在我的个人博客:http://muyunyun.cn/ 写博客有三个层次,第一层次是借鉴居多的博文,第二层次是借鉴后经过消化后有一定量产出的博文,第三层次是原创好文居多的博文.在参考了大量前辈 ...

  10. hdu_A Walk Through the Forest ——迪杰特斯拉+dfs

    A Walk Through the Forest Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/ ...