Use JS to implement mouse wheel binding page image switching-JS Tutorial-php.cn

Use JS to implement mouse wheel binding page image switching

php中世界最好的语言

Release： 2018-04-17 15:15:32

Original

1633 people have browsed it

This time I will bring you how to use JS to switch the image on the page bound by the mouse wheel, and use JS to switch the image on the page bound by the mouse wheel. What are the precautions?The following is a practical case, let's take a look. one time.

The scroll wheel on the mouse is a good thing. Why do I say that? Because it can help us browse web pages quickly and read long articles quickly. For us on the web front-end, how can we not pay attention to this mouse wheel? So how can it allow users to browse the web better?

The most common one is to switch pictures. You can browse pictures by scrolling the wheel, saving the user from having to click on the next picture and do such tedious steps. Let’s look at a simple example.

<!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>

Copy after login

Let’s focus on the js code. Different browsers have different mouse wheel events. To put it bluntly, it is a compatibility issue. There are mainly two types, onmousewheel(IE/Opera/Safari/Chrome) and DOMMouseScroll(Firefox), if you want to be compatible with firefox, you should use addEventListener to listen. This function has 3 parameters, addEventListener(type,listener,useCapture), type is click, focus...type, and the listener can directly write the method function(){}, or it can call the written method body, as in my example. useCapture is a Boolean value, with only true and false, indicating the response sequence of the event. If false is selected, the bubbling method is used, and if true is selected, the Capture method is used. There will be a detailed explanation of addEventListener later.

In the MouseWheel method, e.wheelDelta is compatible with other browsers such as IE. Every time the wheel is rolled, it will return 3/-3 (scroll up/down), while e.detail is compatible with Firefox browser, and every time the wheel is rolled, it will return 120. /-120 (scroll up/scroll down), these returned values can be used to determine whether to scroll up or down. And for loop just hides and displays pictures in order. I believe this is not difficult to understand.

You are welcome to correct any errors or omissions in the article.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!