JavaScript实现鼠标滚轮控制页面图片切换功能示例


Posted in Javascript onOctober 14, 2017

本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能。分享给大家供大家参考,具体如下:

鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读。对于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){//IE
              pic=document.getElementById("pic"+i);
              pic.style.display="block";
            }else if(e.detail){//Firefox
              pic=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">
<span style="white-space:pre">   </span><img src="http://pic1a.nipic.com/2008-12-22/2008122204359187_2.jpg" width="800px" height="600px" id="pic2" style="display:none;">
<span style="white-space:pre">   </span><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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
node.js基础知识汇总
Aug 25 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
浅谈vue路径优化之resolve
Oct 13 #Javascript
薪资那么高的Web前端必看书单
Oct 13 #Javascript
vue router demo详解
Oct 13 #Javascript
JS实现的简单表单验证功能示例
Oct 13 #Javascript
javascript基于定时器实现进度条功能实例
Oct 13 #Javascript
You might like
浅谈PDO的rowCount函数
2015/06/18 PHP
php实现网站留言板功能
2015/11/04 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python url 参数修改方法
2018/12/26 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
移风易俗倡议书
2014/04/15 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
职称评定个人总结
2015/03/05 职场文书
校园安全主题班会
2015/08/12 职场文书
python实现自定义日志的具体方法
2021/05/28 Python