JavaScript implements mouse wheel control page image switching-HTML Tutorial-php.cn

JavaScript implements mouse wheel control page image switching

小云云

Release： 2018-01-29 10:27:12

Original

2095 people have browsed it

The scroll wheel on the mouse is a good thing. Why do I say that? Because it can help us browse the web 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? This article mainly introduces JavaScript to implement the mouse wheel control page image switching function, involving JavaScript event response and dynamic operation of page elements related implementation techniques. Friends in need can refer to it, I hope it can help everyone.

The most common thing is to switch pictures. You can browse pictures by scrolling the wheel, saving the user the need 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

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 listener can directly write the method function( ){}, you can also 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. Each time the wheel is scrolled, it will return +3/-3 (scroll up/down), while e.detail is compatible with Firefox browser. When the scroll wheel is scrolled once, it will return +120/-120 (scroll up/scroll down). These returned values can be used to determine whether to scroll up or down. The for loop only hides and displays pictures in order. I believe this is not difficult to understand.

We welcome your corrections for errors and omissions in the article.

Related recommendations:

JS control page font size problem_html/css_WEB-ITnose

jQuery study notes Control page implementation code_jquery

js 5 ways to control page jump_javascript skills

The above is the detailed content of JavaScript implements mouse wheel control page image switching. For more information, please follow other related articles on the PHP Chinese website!