我想要“鼠标滚轮事件延迟”

时间：2016-04-22 01:28:52

标签： javascript jquery css3

我想要那个.. 鼠标滚轮事件延迟

示例...我运行wheeldown..so更改“bg_02”。但改变bg_05 .. 所以我想要延迟一个倒塌并改变bg_01 - ＆gt; bg_02 一个倒塌并改变bg_02 - ＆gt; bg_03 ... 现在轮换而不是改变bg_01 - ＆gt; bg_04或向下计数++

抱歉，我的英语很少

脚本

// Wheel
function wheel(){
if (event.wheelDelta >= 120){
    wheelUp();
    return;
}
else if (event.wheelDelta <= -120){
    wheelDown();

}
   }
   var bgSpot = $('.bg_spot');
   var bgSpot_Cnt = bgSpot.length;
   bgSpot.eq(0).addClass('spot_on').css('top','0');

   // Down
   function wheelDown(i){
   $('.spot_on').addClass('move_top');
   $('.spot_on').next().css('top','0');
   $('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');
   }

CSS

.bg_spot{position:fixed;top:100%;right:0;bottom:0;left:0;z-index:10;width:100%;height:100%;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-o-transition: 0.6s ease;
transition: 0.6s ease;}

.move_top{
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);}

.move_stage{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);}

.top_0{top:0}
.bg_01{background:#ccc;}
 .bg_02{background:#000;}
 .bg_03{background:olive;}
 .bg_04{background:green}

HTML

   <body onmousewheel="wheel();">
     <div class="bg_spot bg_01">&nbsp;</div>
     <div class="bg_spot bg_02">&nbsp;</div>
     <div class="bg_spot bg_03">&nbsp;</div>
     <div class="bg_spot bg_04">&nbsp;</div>
   </body>

1 个答案:

答案 0 :(得分：0)

更改了您的CSS和JavaScript。检查代码段

 function wheel() {
     if (event.wheelDelta >= 120) {
       //    wheelUp();
       return;
     } else if (event.wheelDelta <= -120) {
       wheelDown();

     }
   }
   //        var bgSpot = $('.bg_spot');
   //        var bgSpot_Cnt = bgSpot.length;
   //        bgSpot.eq(0).addClass('spot_on').css('top', '0');

 // Down
 var i = 1,
   j = 0;

 function wheelDown() {

   $('.bg_spot').hide();


   $('.bg_0' + i).show();

   // $('.spot_on').addClass('move_top');
   // $('.spot_on').next().css('top', '0');
   //  $('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');

   i++;
   if (i > 4)
     i = 1;
 }

.bg_spot {


  overflow: hidden;


  position: absolute;


  right: 0;


  left: 0;


  z-index: 10;


  width: 100%;


  height: 100%;


  -webkit-transition: 0.6s ease;


  -moz-transition: 0.6s ease;


  -o-transition: 0.6s ease;


  transition: 0.6s ease;


  display: none;


}


.move_top {


  -webkit-transform: translate3d(0, -100%, 0);


  -moz-transform: translate3d(0, -100%, 0);


  -o-transform: translate3d(0, -100%, 0);


  transform: translate3d(0, -100%, 0);


}


.move_stage {


  -webkit-transform: translate3d(0, 0, 0);


  -moz-transform: translate3d(0, 0, 0);


  -o-transform: translate3d(0, 0, 0);


  transform: translate3d(0, 0, 0);


}


.top_0 {


  top: 0


}


.bg_01 {


  background: #ccc;


}


.bg_02 {


  background: #000;


}


.bg_03 {


  background: olive;


}


.bg_04 {


  background: green


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body onmousewheel="wheel();">
  <div class="bg_spot bg_01" style="display:block;">
    &nbsp;</div>
  <div class="bg_spot bg_02">
    &nbsp;</div>
  <div class="bg_spot bg_03">
    &nbsp;</div>
  <div class="bg_spot bg_04">
    &nbsp;</div>
</body>