js实现分享到随页面滚动而滑动效果的方法
本文实例讲述了js实现分享到随页面滚动而滑动效果的方法。分享给大家供大家参考。具体如下：
页面向上向下滚动，分享到的模块随着滑动。
要点：
varscrtop=document.documentElement.scrollTop||document.body.scrollTop; varheight=document.documentElement.clientHeight||document.body.clientHeight; vartop=scrtop+(height-jb51.offsetHeight)/2; top=parseInt(top);
获得页面垂直居中的位置
上代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="gb2312"/>
<title>无标题文档</title>
<style>
body{margin:0;padding:0;font:12px/1.5arial;height:2000px;}
#jb51{width:100px;height:200px;line-height:200px;
text-align:center;border:1psolid#ccc;
background:#f5f5f5;position:absolute;left:-100px;top:0;}
#jb51_tit{position:absolute;right:-20px;top:60px;
width:20px;height:60px;padding:10px0;
background:#06c;text-align:center;
line-height:18px;color:#fff;}
</style>
<script>
window.onload=function(){
varjb51=document.getElementById("jb51");
jb51.onmouseover=function(){
startrun(jb51,0,"left")
}
jb51.onmouseout=function(){
startrun(jb51,-100,"left")
}
window.onscroll=window.onresize=function(){
varscrtop=document.documentElement.scrollTop||document.body.scrollTop;
varheight=document.documentElement.clientHeight||document.body.clientHeight;
vartop=scrtop+(height-jb51.offsetHeight)/2;
top=parseInt(top);
startrun(jb51,top,"top")
}
}
vartimer=null
functionstartrun(obj,target,direction){
clearInterval(timer);
timer=setInterval(function(){
varspeed=0;
if(direction=="left"){
speed=(target-obj.offsetLeft)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetLeft==target){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+"px";
}
}
if(direction=="top"){
speed=(target-obj.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetTop==target){
clearInterval(timer);
}else{
obj.style.top=obj.offsetTop+speed+"px";
}
document.title=obj.offsetTop+','+target+','+speed;
}
},30)
}
</script>
</head>
<body>
<divid="jb51">
分享到内容
<spanid="jb51_tit">分享到</span>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。