JavaScript 动画之上下滑动的侧边栏

来源：互联网发布：淘宝自己的评价怎么看编辑：程序博客网时间：2024/05/21 10:49

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style>#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">window.onscroll=function (){    var oDiv=document.getElementById('div1');    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;    //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';    var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;    startMove(parseInt(t));}var timer=null;function startMove(iTarget){    var oDiv=document.getElementById('div1');    clearInterval(timer);    timer=setInterval(function (){        var iSpeed=(iTarget-oDiv.offsetTop)/8;        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);        if(oDiv.offsetTop==iTarget)        {            clearInterval(timer);        }        else        {            oDiv.style.top=oDiv.offsetTop+iSpeed+'px';        }        txt1.value=oDiv.offsetTop+',目标：'+iTarget;    }, 30);}</script></head><body style="height:2000px;"><input id="txt1" type="text" style="position:fixed; top:20px;" /><div id="div1"></div></body></html>

参考：JavaScript

阅读全文

0 0