您的位置：首页 > 编程语言 > Java开发

运用onmousewheel事件写的幻灯片demo

2015-02-15 14:17 375 查看

使用鼠标的滚轮的可以便利了浏览网页，但是当使用滚轮作为控制器时，做一些网页幻灯片形式的展示时，我们要对鼠标的滚轮事件做一些自定义的调整。废话不多说先放上代码

（本段代码只在chrome跑过）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>幻灯片</title>
<style>
html,body{margin:0px;padding:0px;position:relative;}
body{margin:0px;padding:0px;overflow:hidden;position:relative;}
#box{position:absolute;top:0px;left:0px;z-index: -1;-webkit-transition-duration: 1s;}

#b{position:absolute;right:30px;top:300px;z-index:10;}
.cricle{height:10px;width:10px;border-radius: 5px;border:1px solid black;margin:10px 0px 10px 0px;}
#c{width:12px;height:12px;border-radius: 5px;background-color: black;position:absolute;top:10px;left:0px;-webkit-transition-duration: 1s;}
.d{position: relative;}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementsByTagName("body")[0].style.width = window.innerWidth + 'px';
document.getElementsByTagName("body")[0].style.height = window.innerHeight + 'px';
var a = document.getElementsByClassName("a");
var i = 0;
while(a[i]){
a[i].style.width = window.innerWidth + 'px';
a[i].style.height = window.innerHeight + 'px';

i++;
}
function gundong(ev){
console.log("运行gundong");
var ev = ev || window.event;
console.log(ev.wheelDelta);
console.log(document.getElementById("box").style.top);
if(ev.wheelDelta < 0 && parseInt(document.getElementById("box").style.top) >= - window.innerHeight * 3){
console.log("向下");
document.getElementById("box").style.top = parseInt(document.getElementById("box").style.top) - window.innerHeight + '
4000
px';
console.log(document.getElementById("box").style.top);
document.getElementById("c").style.top = parseInt(document.getElementById("c").style.top) + 22 +'px';
}
if(ev.wheelDelta > 0 && parseInt(document.getElementById("box").style.top) < 0){
console.log("向上");
document.getElementById("box").style.top = parseInt(document.getElementById("box").style.top) + window.innerHeight + 'px';
document.getElementById("c").style.top = parseInt(document.getElementById("c").style.top) - 22 +'px';

}
window.onmousewheel = document.onmousewheel = function(){console.log("消除功能");};
window.setTimeout(function(){window.onmousewheel = document.onmousewheel = gundong;},800);
}
window.onmousewheel = document.onmousewheel = gundong;
}
</script>
</head>
<body>
<div id="box" style="top:0px;">
<div class="a" style="background-color:green"></div>
<div class="a" style="background-color:red"></div>
<div class="a" style="background-color:blue"></div>
<div class="a" style="background-color:gray"></div>
<div class="a" style="background-color:yellow"></div>
</div>
<div id="b">
<div id="d">
<div class="cricle"></div>
<div class="cricle"></div>
<div class="cricle"></div>
<div class="cricle"></div>
<div class="cricle"></div>
<div id="c" style="top:10px;"></div>
</div>
</div>
</body>
</html>

这里我们重新定义了事件onmousewheel。

其中我通过HTML DOM方式添加事件，

window.onmousewheel = document.onmousewheel = gundong;

当然由于FireFox在mousewheel事件上与其他浏览的不同，可以通过一下方式对不同浏览器进行通配

if(document.addEventListener){
document.addEventListener('DOMMouseScroll',gundong,false);
}
window.onmousewheel = document.onmousewheel = gundong;

接下来我们重点分析自定义函数gundong()。(代码里出现的console.log(……);只是为了测试不同代码的执行情况)。

onmousewheel中一个重要的属性 wheelDelta 这是判断不同的滚动的方向，虽然在不同的浏览器中，该属性的值不同，但是一致的是相同方向上其返回的值的正负性相同。

利用这一性质，我们可以开始写不同的情况

if(ev.wheelDelta < 0 && parseInt(document.getElementById("box").style.top) >= - window.innerHeight * 3){
console.log("向下");
document.getElementById("box").style.top = parseInt(document.getElementById("box").style.top) - window.innerHeight + 'px';
console.log(document.getElementById("box").style.top);
document.getElementById("c").style.top = parseInt(document.getElementById("c").style.top) + 22 +'px';
}

向下滚的条件，1.wheelDelta值小于0，2.页面不超出一定滚动范围

满足条件，则页面向下移一个屏幕高度的位置，即移一个页面。

向上的滚的条件事件同上。细节略有变化。

接下来是增加用户体验的一个效果

window.onmousewheel = document.onmousewheel = function(){console.log("消除功能");};
window.setTimeout(function(){window.onmousewheel = document.onmousewheel = gundong;},800);

用户滚动齿轮的一个齿就执行一次上面的代码，这样稍动一下滚轮就会出现移动完所有的页面的情况，所以在执行完一次一次翻页，就注销当前的事件的功能，并设定一个时间重新获得功能，来实现，不管用户滚多少齿轮，一次只翻一页的效果。

读者可以将该片段代码从其中删除，来对比体会一下。

实现上面代码的一些css样式还要有些注意的地方

body{overflow:hidden;}
#box{-webkit-transition-duration: 1s;}

消除了页面的滚动条，让其页面的滚动完全自定义

加入滚动时的动画过渡效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascrpit mousewheel

相关文章推荐

新的分享

章节导航

运用onmousewheel事件 写的幻灯片demo

运用onmousewheel事件写的幻灯片demo