今天在项目中遇到的一个问题：点击按钮使用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. hdu1520 Anniversary party 简单树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 思路:树形DP的入门题 定义dp[root][1]表示以root为根节点的子树,且root本身参 ...

  2. [刷题]算法竞赛入门经典(第2版) 4-7/UVa509 - RAID!

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa509 - RAID! #include<iostream> ...

  3. Spring Boot 整合 Elasticsearch，实现 function score query 权重分查询

    摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 预见未来最好的方式就是亲手创造未来 – <史蒂夫·乔布斯传> 』 运行环境: ...

  4. Mac电脑如何搭建php环境,并且开发php.

    这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X 内置了Apache 和 PHP,这样使用起来非常方便.本文以Mac OS X 10.12.4为例,需要的朋友可以参考下! Mac O ...

  5. 开涛spring3(12.3) - 零配置 之 12.3 注解实现Bean定义

    12.3  注解实现Bean定义 12.3.1  概述 前边介绍的Bean定义全是基于XML方式定义配置元数据,且在[12.2注解实现Bean依赖注入]一节中介绍了通过注解来减少配置数量,但并没有完全 ...

  6. Mac主机映射到域名

    1, control+space  打开spotlight, 搜索"终端" 2, 打开终端 3, 在"终端"界面中输入: sudo vi /etc/hosts ...

  7. Fast data loading from files to R

    Recently we were building a Shiny App in which we had to load data from a very large dataframe. It w ...

  8. 移动端网页meta设置和响应式

    苏宁易购WAP的meta分析 响应式 meta设置 媒体查询时读的width为viewport的宽度.viewport宽度为手机分辨率.比如note2 1280*720.需要重置为设备 640*360 ...

  9. 用NIO实现http协议

    先来看一下本篇博文的目录: 一:简介Nio 二:Nio的好处 三:关于http协议 四:代码实现 五:总结 一:简介Nio 我们都知道io流,那么NIO是什么呢?本篇博文将会带你一探NIO,NIO的全 ...

  10. laravel 服务容器实现原理

    前言 通过实现laravel 框架功能,以便深入理解laravel框架的先进思想. 什么是服务容器 服务容器是用来管理类依赖与运行依赖注入的工具.Laravel框架中就是使用服务容器来实现 ** 控制 ...