效果見下圖
1213.gif
代碼見下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自己寫的純JS滾屏</title>
</head>
<style>
*{margin:0px;padding:0px;}
body{overflow: hidden;}
#content div{text-align:center;line-height:500px;font-size:40px;color:white;}
#content{position:absolute;left:0px;top:0px;}
#content div:nth-child(1){background:red;}
#content div:nth-child(2){background:yellow;}
#content div:nth-child(3){background:green;}
#content div:nth-child(4){background:pink;}
#content div:nth-child(5){background:brown;}
</style>
<body>
<div id="content">
<div>鼠標滾輪滾動屏幕就有驚喜</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
<script>
gunping(document.getElementById("content"));
function gunping(obj){
//第一步初始化
var width = document.documentElement.clientWidth||document.body.clientWidth; //獲取到寬度
var height = document.documentElement.clientHeight||document.body.clientHeight; //獲取到高度
var length = obj.children.length; //獲取到個數
//設置每個DIV的寬度和高度
for(var i=0;i<length;i++)
{
obj.children[i].style["width"] = width+"px";
obj.children[i].style["height"] = height+"px";
}
//寫好運動函數
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function move(obj,attr,step,target,endfn)
{
step = target>parseInt(getStyle(obj,attr))?step:-step;
clearInterval(obj.move);
obj.move = setInterval(function(){
var speed = parseInt(getStyle(obj,attr))+step;
if(speed>target&&step>0||speed<target&&step<0)
{
speed = target;
}
obj.style[attr] = speed+"px";
if(speed ==target)
{
clearInterval(obj.move);
endfn&&endfn();
}
},100)
}
//運動函數結束
//mousewheel滾動插件
function mousewheel(obj,downfn,upfn)
{
obj.onmousewheel = fn;
if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', fn, false);
}
function fn(ev) {
var ev = ev || event;
var b = true;
if (ev.wheelDelta) {
b = ev.wheelDelta > 0 ? true : false;
} else {
b = ev.detail < 0 ? true : false;
}
if(b) {
upfn&&upfn();
} else {
downfn&&downfn();
}
if (ev.preventDefault) {
ev.preventDefault();
}
return false;
}
}
//mousewheel滾動插件結束
var Pindex = 0 ;
var flag = true;
function moveDown(){
if(flag)
{
flag = false;
++Pindex;
if(Pindex==length)
{
Pindex = length-1 ;
flag = true;
window.alert(Pindex);
return;
}
move(document.getElementById("content"),"top",500,-Pindex*height,function(){
flag = true;
});
}
}
function moveUp(){
if(flag)
{
flag = false;
--Pindex;
if(Pindex==-1)
{
window.alert("這個是第一屏幕");
Pindex=0;
flag = true;
return;
}
move(document.getElementById("content"),"top",500,-Pindex*height,function(){flag = true;});
}
}
mousewheel(document,moveDown,moveUp);
}
</script>
</html>
