用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 26 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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协程知识点
2018/09/21 PHP
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
vue加载完成后的回调函数方法
2018/09/07 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
物资采购方案
2014/06/12 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
认真学习保证书
2015/02/26 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
党小组评议意见
2015/06/02 职场文书
大学运动会加油稿
2015/07/22 职场文书
小学语文国培研修日志
2015/11/13 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python