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 相关文章推荐
对js关键字命名的疑问介绍
Apr 25 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
vue组件编写之todolist组件实例详解
Jan 22 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python 读写中文json的实例详解
2017/10/29 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python3爬虫怎样构建请求header
2018/12/23 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python如何控制进程或者线程的个数
2020/10/16 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
方正Java笔试题
2014/07/03 面试题
高二英语教学反思
2014/01/19 职场文书
2015年体育部工作总结
2015/04/02 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
golang正则之命名分组方式
2021/04/25 Golang