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 API学Jquery之一 选择器
Apr 07 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
js获取微信版本号的方法
May 12 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
js实现页面图片消除效果
Mar 24 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP 金额数字转换成英文
2010/05/06 PHP
PHP的5个安全措施小结
2012/07/17 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
基于python实现复制文件并重命名
2020/09/16 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
竞聘书格式及范文
2014/03/31 职场文书
个人工作决心书
2015/09/22 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技