用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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 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求正负数数组中连续元素最大值示例
2014/04/11 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
js left,right,mid函数
2008/06/10 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python selenium自动化测试模型图解
2020/04/15 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
化学学院毕业生自荐信范文
2013/12/17 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
荒岛余生观后感
2015/06/09 职场文书
养成教育工作总结
2015/08/13 职场文书
python绘制箱型图
2021/04/27 Python