今天在项目中遇到的一个问题：点击按钮使用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. hosts文件原理

    hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DNS不同的是,计算机的用户可以直接对h ...

  2. SpringMVC中的@Controller和@RequestMapping到底什么鬼？

    1.1 @Controller是什么 首先看个例子: @Controller @RequestMapping("/blog") public class BlogControlle ...

  3. XML编辑工具

    [标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...

  4. Java线程安全性中的对象发布和逸出

    发布(Publish)和逸出(Escape)这两个概念倒是第一次听说,不过它在实际当中却十分常见,这和Java并发编程的线程安全性就很大的关系. 什么是发布?简单来说就是提供一个对象的引用给作用域之外 ...

  5. linux下安装一款笔记软件(为知笔记)

    今天突然想在ubuntu上安装一款跨平台(windows.linux.android)的笔记软件来做日常记录.文章记录以及网页收藏.原先并没有使用过类似的软件,只是见身边的很多人在使用印象笔记来做记录 ...

  6. mysql一库多表查询主键

    mysql> show databases; mysql> use information_schema; mysql> show tables; mysql> select ...

  7. 用JS添加和删除class类名

    下面介绍一下如何给一个节点添加和删除class名 添加:节点.classList.add("类名"): 删除:节点.classList.remove("类名") ...

  8. SQLServer 延迟事务持久性

    SQL Server 2014新功能 -- 延迟事务持久性(Delayed Transaction Durability) SQL Server事务提交默认是完全持久性的(Full Durable), ...

  9. PC端网页的基本构成

    首先,一个前端最基本的就是排网页,有人会看不起拍页面,认为不就是排一个页面嘛,有啥的,分分钟的事,可是他不知道的是,一个网页中也包含了很多内容,像我们如果不理解margin,padding,会经常对我 ...

  10. sar使用

    http://88fly.blog.163.com/blog/static/1226803902012514710581/