本文是承接 上一篇的《自定义鼠标滚动事件》  的基础上实现的，建议大家先看一下上一篇的mousewheel的实现，再浏览下文：

上篇中我们介绍到:

  1.  $element.mousewheel(function(dir){
  2.       console.log(dir) ;
  3.  })

得到的结果为：鼠标滚轮 向上滚动 dir-->1, 向下滚动 dir-->-1

ok，有了这个结果 我们就可以做下边的工作了...

to know what's I want...

　　目标: 滚动鼠标滚轮实现图片合理的放大缩小，何为合理？即：不能让图片失真，至少比例要一致（成比例放大或缩小）

　　思路：有了dir这个属性，让图片向上滚动时，成比例放大；向下滚动时，图片成比例缩小；

　　　　　也就是说 dir=1时，图片的宽高在原有基础上，保持比例一致的增大，dir=-1时，图片的宽高在原有基础上，保持比例一致的缩小。

　　　　　（此时的你是不已经 有点灵感了呢 ：），貌似 这次重点不在如何判断鼠标的滚动方向啦，而是，如何 *合理的 放大和缩小了啊...）

来吧，忍不住了 我要 coding....

1.HTML + CSS:先来写个页面

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3 <head lang="en">
  4.  4     <meta charset="UTF-8">
  5.  5     <title>SE - 点击图片放大 显示 </title>
  6.  6     <style type="text/css">
  7.  7         html,body,* { margin: 0; padding: 0; }
  8.  8         ul { list-style: none;  }
  9.  9         li { float: left; margin-left:10px; }
  10. 10         ul li a { display: block; }
  11. 11     </style>
  12. 12 </head>
  13. 13 <body>
  14. 14     <ul id="picList">
  15. 15         <li><a href="#"><img src="data:images/photo1.jpg"></a></li>
  16. 16         <li><a href="#"><img src="data:images/photo2.jpg"></a></li>
  17. 17         <li><a href="#"><img src="data:images/photo3.jpg"></a></li>
  18. 18         <li><a href="#"><img src="data:images/photo4.jpg"></a></li>
  19. 19     </ul>
  20. 20 </body>
  21. 21 </html>

效果：

2.实现点击图片，弹出模态框，含有要放大的图片 （本人用的jquery实现），代码如下

HTML部分: 新加一个代表模态框的 div

  1. <div id="modal" class="modal"> <img src="" /> </div>

style部分: 对模态框进行设置，图片的上下居中，左右居中（ *这段代码很重要  ）

  1.  1         .modal {
  2.  2             display: none;
  3.  3             position: absolute;
  4.  4             top:;
  5.  5             left:;
  6.  6             z-index:;
  7.  7             width: 100%;
  8.  8             height: 100%;
  9.  9             background-color: #000000;
  10. 10             -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  11. 11             filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  12. 12             background-color: rgba(0,0,0,0.8);
  13. 13             text-align: center;
  14. 14         }
  15. 15         .modal:before {
  16. 16             content: '';
  17. 17             display: inline-block;
  18. 18             height: 100%;
  19. 19             vertical-align: middle;
  20. 20             margin-right: -0.25em; /* Adjusts for spacing */
  21. 21         }
  22. 22         .modal img {
  23. 23             display: inline-block;
  24. 24             vertical-align: middle;
  25. 25             border: 6px solid white;
  26. 26             border-radius: 5px;
  27. 27         }

script部分：引入jquery, 实现弹出模态框，并且点击模态框，模态框消失

  1.  1     <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
  2.  2     <script type="text/javascript">
  3.  3         $(function(){
  4.  4             var smImgA = $('#picList li a'),            //small image
  5.  5                 md = $('.modal');                       //遮罩层
  6.  6
  7.  7             //small images been clicked
  8.  8             smImgA.on('click',function(e){
  9.  9                 e.preventDefault();
  10. 10                 e.stopPropagation();
  11. 11                 //load the big image
  12. 12                 md.empty();
  13. 13                 $('<img src="" />').appendTo(md);
  14. 14                 var bgImg = $('.modal img');                //遮罩层内的 image
  15. 15                 var bgImgSrc = '';                          //big image src
  16. 16                 bgImgSrc = $(this).find('img').attr('src').split('.')[0] + 'big.jpg';   //get the src
  17. 17                 bgImg.attr('src',bgImgSrc);
  18. 18                 //show the model
  19. 19                 md.show(200, bgImgShow);
  20. 20                 //method show() callback function
  21. 21                 function bgImgShow(e){
  22. 22                     //do something。。。。。。
  23. 23                     alert("显示模态框后，都something。。。");
  24. 24                 };
  25. 25             });
  26. 26
  27. 27             //.modal been click
  28. 28             md.on('click',function(e){  //点击模态框，它隐藏
  29. 29                 $(this).hide(300);
  30. 30             });
  31. 31         });
  32. 32     </script>

效果：

3.重点来了，目的：当鼠标在模态框中的图片上 滚动滚轮的时候，图片合理放大（ 我的理解：成比例放大，不能溢出屏幕 ）

script部分：上一节自制的鼠标滚动事件，得到应用啦

　　第1步：引入扩展

  1.  1         $.fn.extend({
  2.  2             mousewheel: function( fn ){
  3.  3                 //judge the brower's mousewheel event, bind the event to element
  4.  4                 var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
  5.  5                         ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
  6.  6                 var el = this[0];           //this[0];  jquery对象 转 JS对象(因addEventListener是JS对象的监听事件)
  7.  7                 if( el.addEventListener ){
  8.  8                    for( var i = toBind.length; i; ){
  9.  9                        el.addEventListener(toBind[--i],handleFun,false);
  10. 10                    }
  11. 11                 }
  12. 12                 else {
  13. 13                     el.onmousewheel = handleFun;
  14. 14                 }
  15. 15
  16. 16                 //deal with the mousewheel
  17. 17                 function handleFun(e){
  18. 18                    var driect = 0, delta=0; //driect:滚动方向  delta:各浏览器监听滚动事件的属性值
  19. 19                    var e = e || window.event;
  20. 20                    if ( e.wheelDelta ){ delta = e.wheelDelta }
  21. 21                    else if ( e.deltaY   ){ delta = e.deltaY * -1 }
  22. 22                    else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
  23. 23                    else {
  24. 24                         console.log('get delta,have somethings wrong...');
  25. 25                    }
  26. 26                    delta==0 ? console.log('get delta,have somethings wrong...') :
  27. 27                    delta>0  ? driect=1 : driect=-1;
  28. 28
  29. 29                    typeof fn==='function' ? fn( $(el) ,driect ) : '';
  30. 30                 }
  31. 31             }
  32. 32
  33. 33         });

　　第2步：实现图片 放大 和 缩小；因为图片的缩放只有在模态框显示后才可以发生，所以我把这一步骤放到了 show()事件的回调函数里，也以便获得图片的真实宽高。我的想法：图片newWidth = realWidth + realWidth*(1+dir*0.1), 也许你已经看出来了，这就是 因为dir=(+1或-1)，所以，图片的新宽度 = 真实宽度 + （放大或缩小的宽度），对就这么简单的思路，ok，开干

  1.  1                 //method show() callback function
  2.  2                function bgImgShow(e){
  3.  3                     var realWidth = bgImg.width(),  realHeight = bgImg.height();//图片真实宽高
  4.  4                     //mousewheel diy
  5.  5                     var imgSize=1;
  6.  6                     bgImg.mousewheel(function( $this,dir ){
  7.  7                         imgSize = imgSize + dir*0.1;
  8.  8                         var newW = realWidth * imgSize, newH = realHeight * imgSize;
  9.  9                         $this.width( newW );
  10. 10                         $this.height( newH );
  11. 11                     });
  12. 12                 };

ok,已实现 图片的放大缩小的功能，但是此时的功能是有瑕疵的，就是图片可以无限放大和缩小，做原理讲述还是可以的，但是，这并不符合场景的应用，所以有了第3步的合理化。

　　第3步：实现图片放大和缩小的和合理化（即,对图片的可 成比例放大和缩小 的范围做限制）。

look at my code.....

  1.  1                function bgImgShow(e){
  2.  2                     var winW = $(window).width(),   winH = $(window).height();  //window的宽高
  3.  3                     var limW = 0.9 * winW,          limH = 0.9 * winH;          //可允许图片显示最大宽高
  4.  4                     var realWidth = bgImg.width(),  realHeight = bgImg.height();//图片真实宽高
  5.  5                     var rdW = limW / realWidth,     rdH = limH / realHeight;    //得到图片宽高与limit宽高比
  6.  6                     //mousewheel diy
  7.  7                     var imgSize=1, minSize=0.2, maxSize= rdW>rdH ? rdH : rdW;
  8.  8                     bgImg.mousewheel(function( $this,dir ){
  9.  9                         console.log( dir );
  10. 10                         imgSize = imgSize + dir*0.1;
  11. 11                         imgSize<minSize ? imgSize=minSize : '';
  12. 12                         imgSize>maxSize ? imgSize=maxSize : '';
  13. 13                         var newW = realWidth * imgSize, newH = realHeight * imgSize;
  14. 14                         $this.width( newW );
  15. 15                         $this.height( newH );
  16. 16                     });
  17. 17                 };

测试：

结果：图片可以合理的放大和缩小，达成目标。

大功告成！！ 此时呢，如果你已看过上一篇的 《自定义鼠标滚动事件》，再加上 这篇的 一个图片放大缩小的Demo，再加上一点点你的创造力，应该可以做出一个不错的关于鼠标滚动的应用啦。哈吼....

上完整代码，结束本文，有问题的话，欢迎大家留言讨论：

  1.   1 <!DOCTYPE html>
  2.   2 <html>
  3.   3 <head lang="en">
  4.   4     <meta charset="UTF-8">
  5.   5     <title>SE - 点击图片放大 显示 </title>
  6.   6     <style type="text/css">
  7.   7         html,body,* { margin: 0; padding: 0; }
  8.   8         ul { list-style: none;  }
  9.   9         li { float: left; margin-left:10px; }
  10.  10         ul li a { display: block; }
  11.  11
  12.  12         .modal {
  13.  13             display: none;
  14.  14             position: absolute;
  15.  15             top: 0;
  16.  16             left: 0;
  17.  17             z-index: 999;
  18.  18             width: 100%;
  19.  19             height: 100%;
  20.  20             background-color: #000000;
  21.  21             -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  22.  22             filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  23.  23             background-color: rgba(0,0,0,0.8);
  24.  24             text-align: center;
  25.  25         }
  26.  26         .modal:before {
  27.  27             content: '';
  28.  28             display: inline-block;
  29.  29             height: 100%;
  30.  30             vertical-align: middle;
  31.  31             margin-right: -0.25em; /* Adjusts for spacing */
  32.  32         }
  33.  33         .modal img {
  34.  34             display: inline-block;
  35.  35             vertical-align: middle;
  36.  36             border: 6px solid white;
  37.  37             border-radius: 5px;
  38.  38         }
  39.  39
  40.  40     </style>
  41.  41     <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
  42.  42     <script type="text/javascript">
  43.  43         $.fn.extend({
  44.  44             mousewheel: function( fn ){
  45.  45                 //judge the brower's mousewheel event, bind the event to element
  46.  46                 var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
  47.  47                         ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
  48.  48                 var el = this[0];           //this[0];  jquery对象 转 JS对象(因addEventListener是JS对象的监听事件)
  49.  49                 if( el.addEventListener ){
  50.  50                    for( var i = toBind.length; i; ){
  51.  51                        el.addEventListener(toBind[--i],handleFun,false);
  52.  52                    }
  53.  53                 }
  54.  54                 else {
  55.  55                     el.onmousewheel = handleFun;
  56.  56                 }
  57.  57
  58.  58                 //deal with the mousewheel
  59.  59                 function handleFun(e){
  60.  60                    var driect = 0, delta=0; //driect:滚动方向  delta:各浏览器监听滚动事件的属性值
  61.  61                    var e = e || window.event;
  62.  62                    if ( e.wheelDelta ){ delta = e.wheelDelta }
  63.  63                    else if ( e.deltaY   ){ delta = e.deltaY * -1 }
  64.  64                    else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
  65.  65                    else {
  66.  66                         console.log('get delta,have somethings wrong...');
  67.  67                    }
  68.  68                    delta==0 ? console.log('get delta,have somethings wrong...') :
  69.  69                    delta>0  ? driect=1 : driect=-1;
  70.  70
  71.  71                    typeof fn==='function' ? fn( $(el) ,driect ) : '';
  72.  72                 }
  73.  73             }
  74.  74
  75.  75         });
  76.  76
  77.  77         $(function(){
  78.  78             var smImgA = $('#picList li a'),            //small image
  79.  79                 md = $('.modal');                       //遮罩层
  80.  80
  81.  81             //small images been clicked
  82.  82             smImgA.on('click',function(e){
  83.  83                 e.preventDefault();
  84.  84                 e.stopPropagation();
  85.  85                 //load the big image
  86.  86                 md.empty();
  87.  87                 $('<img src="" />').appendTo(md);
  88.  88                 var bgImg = $('.modal img');                //遮罩层内的 image
  89.  89                 var bgImgSrc = '';                          //big image src
  90.  90                 bgImgSrc = $(this).find('img').attr('src').split('.')[0] + 'big.jpg';   //get the src
  91.  91                 bgImg.attr('src',bgImgSrc);
  92.  92                 //show the model
  93.  93                 md.show(200, bgImgShow);
  94.  94                 //method show() callback function
  95.  95                function bgImgShow(e){
  96.  96                     var winW = $(window).width(),   winH = $(window).height();  //window的宽高
  97.  97                     var limW = 0.9 * winW,          limH = 0.9 * winH;          //可允许图片显示最大宽高
  98.  98                     var realWidth = bgImg.width(),  realHeight = bgImg.height();//图片真实宽高
  99.  99                     var rdW = limW / realWidth,     rdH = limH / realHeight;    //得到图片宽高与limit宽高比
  100. 100                     //mousewheel diy
  101. 101                     var imgSize=1, minSize=0.2, maxSize= rdW>rdH ? rdH : rdW;
  102. 102                     bgImg.mousewheel(function( $this,dir ){
  103. 103                         console.log( dir );
  104. 104                         imgSize = imgSize + dir*0.1;
  105. 105                         imgSize<minSize ? imgSize=minSize : '';
  106. 106                         imgSize>maxSize ? imgSize=maxSize : '';
  107. 107                         var newW = realWidth * imgSize, newH = realHeight * imgSize;
  108. 108                         $this.width( newW );
  109. 109                         $this.height( newH );
  110. 110                     });
  111. 111                 };
  112. 112             });
  113. 113
  114. 114             //.modal been click
  115. 115             md.on('click',function(e){
  116. 116                 $(this).hide(300);
  117. 117             });
  118. 118         });
  119. 119     </script>
  120. 120
  121. 121
  122. 122 </head>
  123. 123 <body>
  124. 124     <ul id="picList">
  125. 125         <li><a href="#"><img src="data:images/photo1.jpg"></a></li>
  126. 126         <li><a href="#"><img src="data:images/photo2.jpg"></a></li>
  127. 127         <li><a href="#"><img src="data:images/photo3.jpg"></a></li>
  128. 128         <li><a href="#"><img src="data:images/photo4.jpg"></a></li>
  129. 129     </ul>
  130. 130
  131. 131     <div id="modal" class="modal"> <img src="" /> </div>
  132. 132 </body>
  133. 133 </html>

　　

勤能补拙是良训，一分辛苦一分甜。

自定义mousewheel事件，实现图片放大缩小功能实现的更多相关文章

  1. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  2. wpf下的图片放大缩小

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

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

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

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

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

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

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

  6. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  7. Canvas实现图片放大缩小移动操作

    对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...

  8. 图片放大缩小（和ViewPager配合使用流畅显示）--第三方开源--PhotoView

    图片的放大缩小实现效果是使用的github上的一个开源项目photoView实现的,下载地址:https://github.com/chrisbanes/PhotoView 下面看测试代码: acti ...

  9. 41.Android之图片放大缩小学习

    生活中经常会用到图片放大和缩小,今天简单学习下. 思路:1.添加一个操作图片放大和缩小类;  2. 布局文件中引用这个自定义控件;  3. 主Activity一些修改. 代码如下: 增加图片操作类: ...

随机推荐

  1. 第二百二十节，jQuery EasyUI，Slider(滑动条)组件

    jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...

  2. struts中如何实现国际化，涉及哪些文件？

    struts中如何实现国际化,涉及哪些文件? 解答:“国际化”是指一个应用程序在运行时能够根据客户端请求所来自的国家/地区.语言的不同而显示不同的用户界面.Struts框架通过使用<bean:m ...

  3. 2018 CCPC 桂林游记

    TYPE: Onsite Contest NAME: 2018 - CCPC - Guilin PLAT: HUSTOJ TIME: 2018/10/28 09:00-14:00 CST LOCA: ...

  4. 蓝桥杯 第四届C/C++预赛真题（2） 马虎的算式（穷举）

    标题: 马虎的算式 小明是个急性子,上小学的时候经常把老师写在黑板上的题目抄错了. 有一次,老师出的题目是:36 x 495 = ? 他却给抄成了:396 x 45 = ? 但结果却很戏剧性,他的答案 ...

  5. Activity公用跳转到主Activity

    public class VSession { private VSession() { } public static VSession getInstance() { if (session == ...

  6. cocos2d 粒子效果以及Particle Designer粒子工具的学习

    最近在学习cocos2d中的粒子效果吧,下面就把学到的和大家分享下吧! Now!我们先了解下类结构吧 -- CCParticleSystem(所有粒子系统的父类) -- CCParticleSyste ...

  7. Dapper的语法应用

    (1)返回某个整型或字符串类型的字段 public string GetSupplierCodeById(int Id) { using( var conn=DbFactory.CreateConne ...

  8. 大数据技术大合集：Hadoop家族、Cloudera系列、spark、storm【转】

    大数据我们都知道hadoop,可是还会各种各样的技术进入我们的视野:Spark,Storm,impala,让我们都反映不过来.为了能够更好 的架构大数据项目,这里整理一下,供技术人员,项目经理,架构师 ...

  9. 170227、java分布式系统开关功能设计(服务升降级)

    首先讲一下开关的由来,例如东京在6月18日做店庆促销活动,在交易下单环节,可能需要调用A.B.C三个接口来完成,但是其实A和B是必须的,C只是附加的功能(例如在下单的时候做一下推荐),可有可无,在平时 ...

  10. 找不到Microsoft Access Driver(*.mdb)ODBC驱动程序的安装例程。请重新安装驱动

    按照教材创建的方法:“控制面板-管理工具-数据源(ODBC)”,打开“ODBC数据源管理器”窗口,然后“添加”,打开“创建新数据源”的窗口,最后选择Microsoft Access Driver(*. ...