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 相关文章推荐
javascript计时器事件使用详解
Jan 07 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
js实现图片放大展示效果
Aug 30 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
序列化模块json代码实例详解
Mar 03 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
PHP 高级课程笔记 面向对象
2009/06/21 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
express.js中间件说明详解
2019/03/19 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
浅析Python中的for 循环
2016/06/09 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python常用的json标准库
2019/02/19 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
文明礼仪标语
2014/06/13 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
租房安全协议书
2014/08/20 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
千与千寻观后感
2015/06/04 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android