js--滑动块 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom: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+scrollTop+'px';
    }
    
    var timer=null;
    function startMove(iTarget)
        {
            var oDiv=document.getElementById('div1');
            
            clearInterval(timer);
            timer=setInterval(function() {
                var speed={iTarget-oDiv.offsetTop}/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
                if(oDiv.offsetHeight==iTarget)
                    {
                        clearInterval(timer);
                    }
                else
                    {
                        oDiv.style.Top=oDiv.offsetTop+speed+'px';
                    }
            },30);
        }
    
    </script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

 

posted @ 2020-02-10 22:44  八风不动  阅读(235)  评论(0)  编辑  收藏  举报