bg_02按下并更-6ren">
gpt4 book ai didi

javascript - 我想要那个 "mousewheel event delay"

转载 作者:行者123 更新时间:2023-11-28 06:00:30 25 4
gpt4 key购买 nike

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

示例...我运行 wheeldown..所以更改“bg_02”。但改变 bg_05..所以我想延迟一个 wheeldown 并更改 bg_01 -> bg_02按下并更改 bg_02 -> bg_03...现在 wheeldown 比更改 bg_01 -> bg_04 或 wheeldown count++

抱歉我的英语不好

脚本

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

关于javascript - 我想要那个 "mousewheel event delay",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36783176/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com