Home>

jquery mousewheel is used to add cross-browser mouse wheel support.The mousewheel event handler has changed slightly.In addition to the first parameter event, it also receives the second parameter delta. The parameter delta can get the direction and speed of the mouse wheel.

To achieve the whole screen upside down effect:

Js to be loaded

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

The css style is as follows:

body {padding:0;margin:0;overflow:hidden}
ul {list-style:none;}
.content {width:100%;height100%;position:relative;top:0;}
.div_01, .div_02, .div_03, .div_04 {width:100%;margin:0 auto;text-align:center;}
.div_01 {background:#b20909;}
.div_02 {background:#0941b2;}
.div_03 {background:#2db209;}
.div_04 {background:#b29c09;}
.left_fixed {position:fixed;width:15px;height:100px;left:100px;top:200px;z-index:999;}
.left_fixed ul li {
  background:#000;cursor:pointer;width:15px;height:15px;
  border-radius:15px;margin-bottom:10px;
}
.left_fixed ul li.active {background:#fff;}

The jquery code is as follows:

var page=0;//Scrolling variable,Initial first screen
var shakstaute=0;//This variable is used when the mouse wheel slides down or up
$(function () {
  var starttime=0,    endtime=0;
  $("body"). mousewheel (function (event, delta) {
    starttime=new date (). gettime ();//Record the initial time of flipping the screen
    if (delta<0&&page>= 0&&page<= $(". content .divsame"). length-2) {
      if (shakstaute>= 0&&(starttime == 0 || (endtime-starttime)<= -500)) {//perform a screen flip within 500ms
        shakstaute=1;
        page ++;
        renderpage (page, true);//Flip screen function
        endtime=new date (). gettime ();//Record the end time of scrolling
      }
    } else if (delta>0&&page>= 1&&shakstaute == 1&&(starttime == 0 || (endtime-starttime)<-500)) {
      page--;
      renderpage (page, true);
      endtime=new date (). gettime ();
    }
  });
  var div_height=$(window) .height ();
  $(". divsame"). css ({"height":div_height});
  $(window) .resize (function () {
    div_height=$(window) .height ();
    $(". divsame"). css ({"height":div_height});
    $(". content"). animate ({top:-page * div_height}, 100);
  });
  $(". left_fixed ul li"). on ("click", function () {//Click the small navigation to perform the screen change
    var index=$(this) .index ();
    if (index>0) {
      shakstaute == 1;
    }
    page=index;
    renderpage (page, true);
    $(". left_fixed ul li"). removeclass ("active");
    $(this) .addclass ("active");
    return false;
  });
  function renderpage (pagenumber, isscroll) {
  if (isscroll) {
    $(". content"). animate ({top:-pagenumber * div_height}, "slow");
    $(". left_fixed ul li"). removeclass ("active");
    $(". left_fixed ul li"). eq (pagenumber) .addclass ("active");
  }
   return;
}
})

It also responds in real time.

Let's look at another example

Pay attention to the head-loaded js, jquery library, and index.js implemented by mousewheel.js

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
  body {padding:0;margin:0;overflow:hidden}
  ul {list-style:none;}
  .div_01, .div_02, .div_03, .div_04 {width:100%;margin:0 auto;text-align:center;}
  .div_01 {background:#b20909;}
  .div_02 {background:#0941b2;}
  .div_03 {background:#2db209;}
  .div_04 {background:#b29c09;}
  .left_fixed {position:fixed;width:15px;height:100px;left:100px;top:200px;z-index:999;}
  .left_fixed ul li {background:#000;cursor:pointer;width:15px;height:15px;border-radius:15px;margin-bottom:10px;}
  .left_fixed ul li.active {background:#fff;}
</style>
</head>
<body>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

The jquery code is as follows (index.js):

var i=0;//Scrolling variable,Initial first screen
var s=0;//This variable is used when the mouse wheel slides down or up
$(function () {
  var starttime=0,    endtime=0;
  $("body"). mousewheel (function (event, delta) {
    starttime=new date (). gettime ();//Record the initial time of flipping the screen
    if (delta<0&&i>= 0&&i<2) {
      if (s>= 0&&(starttime == 0 || (endtime-starttime)<--500)) {//perform a screen flip within 500ms
        s=1;
        i ++;
        renderpage (i, true);//Flip screen function
        endtime=new date (). gettime ();//Record the end time of scrolling
      }
    } else if (delta>0&&i>= 1&&s == 1&&(starttime == 0 || (endtime-starttime)<= -500)) {
      i--;
      //console.log(i);
      renderpage (i, true);
      endtime=new date (). gettime ();
    }
  });
  var div_height=$(window) .height ();
  $(". div_01, .div_02, .div_03, .div_04"). css ({"height":div_height});
  $(window) .resize (function () {
  var div_height=$(window) .height ();
  $(". div_01, .div_02, .div_03, .div_04"). css ({"height":div_height});
  });
  function renderpage (pagenumber, isscroll) {
    if (isscroll) {
        $("body, html"). animate ({scrolltop:pagenumber * div_height}, "slow");
        $(". left_fixed ul li"). removeclass ("active");
        $(". left_fixed ul li"). eq (pagenumber) .addclass ("active");
      }
     return;
    }
  $(". left_fixed ul li"). on ("click", function () {//Click the small navigation to perform the screen change
    var index=$(this) .index ();
    renderpage (index, true);
    $(". left_fixed ul li"). removeclass ("active");
    $(this) .addclass ("active");
    return false;
  });
})