妙味——缓冲侧边栏 

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
#div1{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: absolute;
    right: 0;
}
</style>
<script>
window.onscroll=function(){
    var oDiv = document.getElementById('div1');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    // oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
    var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop;
    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';
        }
    },30);
}
</script>
</head>
<body style="height:2000px;">
    <div id="div1"></div>
</body>
</html>

 

posted @ 2013-12-18 00:01  白小虫  阅读(201)  评论(0)  编辑  收藏  举报