本文笔者在北京喝咖啡的时候突然想到的...这段时间就有想写几篇关于滚动滚动条的文章,所以回家到之后就奋笔疾书的写出来发表了
伴随着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);
$(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); } } });
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
文章结束给大家分享下程序员的一些笑话语录: 联想——对内高价,补贴对外倾销的伟大“民族”企业。