今天在项目中遇到的一个问题：点击按钮使用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. 使用CSS和JQuery实现表格单元格内容超出时部分隐藏，隐藏部分以...显示

    1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...

  2. RNN的介绍

    一.状态和模型 在CNN网络中的训练样本的数据为IID数据(独立同分布数据),所解决的问题也是分类问题或者回归问题或者是特征表达问题.但更多的数据是不满足IID的,如语言翻译,自动文本生成.它们是一个 ...

  3. [刷题]算法竞赛入门经典(第2版) 5-13/UVa822 - Queue and A

    题意:模拟客服MM,一共有N种话题,每个客服MM支持处理其中的i个(i < N),处理的话题还有优先级.为了简化流程方便出题,设每个话题都是每隔m分钟来咨询一次.现知道每个话题前来咨询的时间.间 ...

  4. 基于TypeScript的FineUIMvc组件式开发（开头篇）

    了解FineUIMvc的都知道,FineUIMvc中采用了大量的IFrame框架,对于IFrame的优缺点网上也有很多的讨论,这里我要说它的一个优点“有助于隔离代码逻辑”,这也是FineUIMvc官网 ...

  5. VR的发展历程-VR全景智慧城市

    从1962年有第一台VR开始,到2014年Oculus被Facebook收购为止,VR经历了一个非常漫长的过程.从鲜为人知,到被广泛认识,逐渐走进我们生活.这就是VR形成的时代.在这个时代里,VR设备 ...

  6. Reverse Integer 2015年6月23日

    题目: Reverse digits of an integer. Example1: x = , return Example2: x = -, return - 思路:递归 解答: / test ...

  7. NodeJS 入门第二天（EJS模板）

    一.复习 复习:Node.js开发服务器,数据.路由.本地关心的效果,交互: Node.js实际上是极客开发出的一个小玩具,不是银弹.有着别人不具备的怪异特点: 单线程.Non-blocking I/ ...

  8. redis入门指南-附录A

  9. MyBatis 3 User Guide Simplified Chinese.pdf

    MyBatis 3 用户指南 帮助我们把文档做得更好… 如果你发现了本文档的遗漏之处,或者丢失 MyBatis 特性的说明时,那么最好的方法就 是了解一下这个遗漏之处然后把它记录下来. 我们在 wik ...

  10. docker安装-centos7

    操作系统要求 要安装Docker,您需要64位版本的CentOS 7.步骤:   卸载旧版本 Docker的旧版本被称为docker或docker-engine . 如果这些已安装,请卸载它们以及关联 ...