伴随着html5和css3的成熟,页面展现的越来越绚丽越吸引人,尤其体现在各大网站的专题活动上。
现在写了一个简略的框框。
实现思想:
当滚动条滚动时,滚动到底部切换到下一屏,滚动到顶部时切换到上一屏。
点击按钮时滚动到对应的屏。
代码简略:
1、滚动条滚动方向,-1向下,1向上,注意:如用ie,请用ie9以上的浏览器看效果。
document.addEventListener(mousewheel,function(e){
e = e || window.event;
if(!isFirefox){
direct = e.wheelDelta>0?-1:1;
}
else{
direct = e.detail<0?-1:1;
}
},false);
2、滚动到那一屏
$(document).scroll(function(){
rollH = $(this).scrollTop();
if(islock){
if((rollH===docH-winH) && (direct === 1 )){
num++;
if(num>5){
num = 5;
return;
}
if(!((num===5)||(num===0))){
islock = false;
}
running(num);
}
else if((rollH ===0)&&(direct === -1)){
num--;
if(num<0){
num = 0;
return;
}
if(!((num===5)||(num===0))){
islock = false;
}
running(num);
}
}
});
3、切换滚动,在切换那一时刻,将滚动条隐藏,结束后再显示。除了第一屏外,其他的屏都是距离顶端有1px距离。
var islock = true;
test.animate({"left":"0px","top":"0px"},500,function(){
$(document).scrollTop(0);
setTimeout(function(){
islock=true;
$(document).scrollTop(1);
$("body").removeClass("bodyon");
},500);
});
题来了:
当滚动条滚动时,蓝色块会抖动,尤其在ie9和chrome下比较明显。
感兴趣的朋友可以试试写写哈O(∩_∩)O
来源:https://www.cnblogs.com/kuikui/archive/2013/03/24/2979794.html