cari

Rumah >hujung hadapan web >tutorial js >JavaScript实现鼠标滚轮控制页面图片切换的示例代码

JavaScript实现鼠标滚轮控制页面图片切换的示例代码

黄舟
黄舟asal
2017-10-16 11:10:511637semak imbas

这篇文章主要介绍了JavaScript实现鼠标滚轮控制页面图片切换功能,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了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>
  <p 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;">
  </p>
</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循环只是让图片有顺序的隐藏和显示，相信这个不难看懂。

Atas ialah kandungan terperinci JavaScript实现鼠标滚轮控制页面图片切换的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript面向对象基础与this指向问题的具体分析Artikel seterusnya：JavaScript中关于防止递归栈溢出错误的解析

Artikel berkaitan

Lihat lagi