今天在项目中遇到的一个问题：点击按钮使用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. hdu4597 Play Game DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4597 感觉很不错的区间DP,又做了一遍,感觉自己对边界的处理还是很欠缺 代码: #include< ...

  2. LinkedHashMap：我还能实现LRU

    众所周知,LinkedHashMap继承自HashMap,在原先的HashMap的基础上,它增加了Entry的双向链接. 有意思的是基于这种实现特性,LinkedHashMap 在迭代遍历时,取得键值 ...

  3. 如何在Unity中分别实现Flat Shading(平面着色)、Gouraud Shading(高洛德着色)、Phong Shading(冯氏着色)

    写在前面: 先说一下为什么决定写这篇文章,我也是这两年开始学习3D物体的光照还有着色方式的,对这个特别感兴趣,在Wiki还有NVIDIA官网看了相关资料后,基本掌握了渲染物体时的渲染管道(The re ...

  4. List的多维度排序案例演示~

    文章也已同步到我的csdn:http://blog.csdn.net/u012881584/article/details/72377510 关于List的多维度排序. 日常工作中有很多关于list的 ...

  5. MyBatis和Hibernate相比，优势在哪里？

    1.开发对比开发速度 hibernate的真正掌握要比Mybatis来得难些.Mybatis框架相对简单很容易上手,但也相对简陋些.个人觉得要用好Mybatis还是首先要先理解好Hibernate. ...

  6. (转)Amoeba for MySQL 非常好用的mysql集群软件

    Amoeba for MySQL Amoeba for MySQL致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当query 路由功能,专注 分布式数据库 proxy ...

  7. SimpleDateFormat使用和线程安全问题

    SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (date -> text).语法分析 (text -> date)和标准化. Simpl ...

  8. RabbitMQ_安装配置与管理

    RabbitMQ 安装配置与管理 安装 安装erlang虚拟机 Rabbitmq基于erlang语言开发,所有需要安装erlang虚拟机 #wget  http://www.erlang.org/do ...

  9. neutron flat和vxlan网络访问外网流量走向

    OpenStack版本:Mitaka 物理节点: Hostname Management IP Tunnel IP Role test-ctrl-01 192.168.100.11 192.168.1 ...

  10. 那些年我遇到的ERP顾问

    当我写下这篇随笔的时候,算起来在我从业9年的时间里,也差不多遇到了4-5拨的ERP咨询顾问,严格来说是4家ERP顾问公司.分别是:IBM.汉得.鼎捷以及盈通金服.从实施水准.技术力量.沟通技巧.做事态 ...