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

I want that "mousewheel event delay"

本文关键字：事件 延迟 鼠标 我想要      更新时间：2023-09-26

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

例。。。我跑轮子..所以改变"bg_02"。但改变bg_05..所以我想要延迟一个轮子，换bg_01-> bg_02一个轮子，换bg_02-> bg_03...现在轮降比更改bg_01 -> 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>
更改了

你的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>

相关文章：