作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
bg_02按下并更-6ren">
我想要那个..鼠标滚轮事件延迟
示例...我运行 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');
}
.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}
<body onmousewheel="wheel();">
<div class="bg_spot bg_01"> </div>
<div class="bg_spot bg_02"> </div>
<div class="bg_spot bg_03"> </div>
<div class="bg_spot bg_04"> </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;">
</div>
<div class="bg_spot bg_02">
</div>
<div class="bg_spot bg_03">
</div>
<div class="bg_spot bg_04">
</div>
</body>
关于javascript - 我想要那个 "mousewheel event delay",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36783176/
使用登录后,我想吐出用户名。 但是,当我尝试单击登录按钮时, 它给了我力量。 我看着logcat,但是什么也没显示。 这种编码是在说。 它将根据我在登录屏幕中输入的名称来烘烤用户名。 不会有任何密码。
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎是题外话,因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或include a min
我是一名优秀的程序员,十分优秀!