缓冲运动[实例--上下滑动客服

来源：互联网发布：梦幻西游淘宝网编辑：程序博客网时间：2024/05/16 12:38

******************缓冲运动[实例--上下滑动客服1*************************

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width:100px;height:200px;position: absolute;top:0;right:0;background:yellow;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";//////慎记，需要添加px

window.onscroll=function()
{
// var oDiv=document.getElementsByTagName("div")[0];
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";//////慎记，需要添加px
}

}
</script>
</head>
<body style="height:3000px">
<div></div>
</body>

</html>

************************缓冲运动[实例--上下滑动客服2**************************************

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width:100px;height:200px;position: absolute;top:0;right:0;background:yellow;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";//////慎记，需要添加px

window.onscroll=function()
{
// var oDiv=document.getElementsByTagName("div")[0];
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
// oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";//////慎记，需要添加px
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

startMove(parseInt(t));//这里必须取整，小数会出问题
}
};
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementsByTagName("div")[0];
clearInterval(timer);
timer=setInterval(function(){
var Speed=(iTarget-oDiv.offsetTop)/10;
Speed=Speed>0?Math.ceil(Speed):Math.floor(Speed);
if(oDiv.offsetTop==iTarget){clearInterval(timer)}
else
{
oDiv.style.top=oDiv.offsetTop+Speed+"px";
document.getElementsByTagName("input")[0].value=oDiv.offsetTop+"目标："+iTarget;
}
},30)
}
</script>
</head>
<body style="height:3000px">
<div></div>
<input type="text" style="position: fixed;top:20px;"/>
</body>
</html>

0 0