JavaScript代码制作页面鼠标滚轮图片切换
来源:互联网 发布:思科交换机端口配置ip 编辑:程序博客网 时间:2024/05/12 18:31
鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读。对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢?
最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤。来看个简单的例子吧。
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标通过滚动滚轮切换图片</title><style>#picBox{width:800px;height:600px;margin:70px auto;}</style><script>var nowPic=1;function MouseWheel(e){var pic;e=e||window.event;for(i=1;i<4;i++){if(i==nowPic){if(e.wheelDelta){//IEpic=document.getElementById("pic"+i);pic.style.display="block";}else if(e.detail){//Firefoxpic=document.getElementById("pic"+i);pic.style.display="block";}}else{pic=document.getElementById("pic"+i);pic.style.display="none";}}if(nowPic>=3){nowPic=1;}else{nowPic++;}}/*Firefox注册事件*/if(document.addEventListener){document.addEventListener("DOMMouseScroll",MouseWheel,false);}window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome</script></head><body><h3 align="center">鼠标通过滚动滚轮切换图片</h3><div id="picBox"><img src="http://picm.bbzhi.com/dongwubizhi/dongwuheji/dongwuheji_69803_m.jpg" width="800px" height="600px" id="pic1"><img src="http://pic1a.nipic.com/2008-12-22/2008122204359187_2.jpg" width="800px" height="600px" id="pic2" style="display:none;"><img src="http://imgphoto.gmw.cn/attachement/jpg/site2/20121221/002564a60ce4123e17614e.jpg" width="800px" height="600px" id="pic3" style="display:none;"></div></body></html>
重点讲解下js代码,不同的浏览器鼠标滚轮事件也不一样,说白点就是兼容性问题,主要是有两种,onmousewheel(IE/Opera/Safari/Chrome)和DOMMouseScroll(Firefox),如果想兼容firefox,应采用addEventListener监听,这个函数有3个参数,addEventListener(type,listener,useCapture),type就是click,focus......类型,而listener可以直接写方法function(){},也可以调用写好的方法体,如我的例子。useCapture是一个布尔值,只有true和false,表示该事件的响应顺序,选false则采用bubbing(冒泡)方式,选项true采用Capture方式。对于addEventListener以后会出一个详解。
在MouseWheel方法中e.wheelDelta兼容IE等其它浏览器,每当滚动一次滚轮会返回+3/-3(上滚/下滚),而e.detail兼容Firefox浏览器,每当滚动一次滚轮会返回+120/-120(上滚/下滚),通过这些返回的值可以做出是向上还是向下滚动的判断。而for循环只是让图片有顺序的隐藏和显示,相信这个不难看懂。
因为博主是新手,可能对问题的讲解不够详细,又或者说错了一些理解,大家都能给我提出,好让我及时改正,谢谢大家啦。
- JavaScript代码制作页面鼠标滚轮图片切换
- 鼠标滚轮缩放图片javascript
- 鼠标滚轮及左右键切换图片
- 图片旋转,鼠标滚轮缩放,镜像,切换图片js代码
- JavaScript特效:图片鼠标滚轮缩放
- javascript制作图片切换
- JavaScript 鼠标移动切换图片
- javascript: 鼠标滚轮事件
- Javascript鼠标滚轮监测
- Javascript鼠标滚轮编程
- Javascript鼠标滚轮编程
- javascript鼠标滚轮事件
- JS实现鼠标滚轮缩小放大拖动图片代码
- 支持IE和Firefox的鼠标滚轮事件JavaScript代码
- 鼠标滚轮放大/缩小图片
- 鼠标滚轮 放大缩小图片
- js 鼠标滚轮缩放图片
- 鼠标滚轮实现图片缩放
- raspberry 安装
- raspberry 安装(2)使用ssh连接
- [HDOJ 1042] N! [java大数]
- 安卓学习140501:fragments
- hdu2571 数塔
- JavaScript代码制作页面鼠标滚轮图片切换
- nefu 642 monkey
- JAVA之IO技术异常处理机制
- WebView 简单使用
- [POJ 3687] Labeling Balls [拓扑排序]
- VC6.0用file->open后,出现“MSDEV.EXE-应用程序错误 遇到问题需要关闭“
- 看完笨木头有感。
- struts2配置操作步骤
- 常用的单链表操作【2】