用HTML5实现鼠标滚轮事件放大缩小图片的功能


Posted in HTML / CSS onJune 25, 2015

 你我都知道在HTML5网页中添加鼠标滚轮事件能够更好的让用户与网页进行交互操作。而在HTML5中,鼠标滚轮并不仅仅就只能上下滑动网页,实际上你还可以依靠这个完成更多的功能,比如视野平面的放大与缩小。

看看实际演示效果
大部分浏览器都是支持鼠标滚轮事件的,所以你可以先订阅鼠标滚轮事件的方法,每当事件被触发时,你能获取一个名为 wheelDelta 的属性,它代表刚才鼠标滚轮改变的大小,其中正值表示滚轮往下滑动,负值表示滚轮往上滑动。数值的绝对值越大,滑动范围越大。

但不幸的是依然有一款浏览器是不支持鼠标滚轮事件的。那就是FireFox。Mozilla 已经实现了一个名为"DOMMouseScroll"的事件的处理,它会传递一个名为 event 且附带了名为 detail 属性的事件参数过来,然而,这个 detail 属性不同于 wheelDelta,它只能返回正值,即只能坚持鼠标滚轮向下滚动的值。

你应该特别注意一下,Apple公司在Safari浏览器中也禁用了鼠标滚动控制页面上下滑动,但是此功能依然在webkit引擎中正常使用的,所以你写的代码是不会触发什么问题的。

添加鼠标滚轮事件处理方法
首先我们在网页中添加一个图片,待会就能用鼠标滚轮控制此图片的缩放
 

XML/HTML Code复制内容到剪贴板
  1. <img id="myimage" src="myimage.jpg" alt="my image" />  

现在来添加鼠标滚轮事件处理代码
 

XML/HTML Code复制内容到剪贴板
  1. var myimage = document.getElementById("myimage");   
  2. if (myimage.addEventListener) {   
  3.     // IE9, Chrome, Safari, Opera   
  4.     myimage.addEventListener("mousewheel", MouseWheelHandler, false);   
  5.     // Firefox   
  6.     myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);   
  7. }   
  8. // IE 6/7/8   
  9. else myimage.attachEvent("onmousewheel", MouseWheelHandler);  

为了让不同浏览器都能支持的处理做法

在下面这个案例中,我们将对Firefox的detail值取反然后返回1或者-1的其中一个
 

XML/HTML Code复制内容到剪贴板
  1. function MouseWheelHandler(e) {   
  2.     // cross-browser wheel delta   
  3.     var e = window.event || e; // old IE support   
  4.     var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));  

现在我们直接决定图片的大小范围。以下代码将图片的宽度范围设置在50-800个像素之间
 

XML/HTML Code复制内容到剪贴板
  1.     myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";   
  2.     return false;   
  3. }  

最后一点,我们在方法中返回false是为了终止标准的鼠标滚轮事件处理,以防它上下滑动网页。
查看实际演示

HTML / CSS 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 #HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 #HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 #HTML / CSS
带你认识HTML5中的WebSocket
May 22 #HTML / CSS
用HTML5制作视频拼图的教程
May 13 #HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 #HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 #HTML / CSS
You might like
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
jquery 上下滚动广告
2009/06/17 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
利用python获取Ping结果示例代码
2017/07/06 Python
python实现ID3决策树算法
2018/08/29 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
公司总经理工作职责管理办法
2014/02/28 职场文书
中药专业自荐信范文
2014/03/18 职场文书
求职信标题怎么写
2014/05/26 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
孔庙导游词
2015/02/04 职场文书
热血教师观后感
2015/06/10 职场文书