zoukankan html css js c++ java

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;
        //alert(document.documentElement.clientHeight);
        //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
        //alert(document.documentElement.clientHeight);
        //document.title=oDiv.offsetHeight;
        //alert(oDiv.offsetHeight);
        //alert(document.documentElement.scrollTop);
        //alert(scrollTop);
        //alert(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
        startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
    }
    
    var timer=null;
    function startMove(iTarget)
        {
            var oDiv=document.getElementById('div1');
            
            clearInterval(timer);
            timer=setInterval(function() {
                var speed=(iTarget-oDiv.offsetTop)/6;
                //alert(iTarget-oDiv.offsetTop);
                //alert(iTarget);
                //alert(speed);
                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>

查看全文

相关阅读:
Google Map API基本概念（转载）很好的例子
 Sql Exception Handling & Throw Exception
幸福人生讲座（十）：五伦中哪一伦最重要？
Delete Database Log
杨澜语录
 余世雄如何提升职场“执行力”
红楼女梦
 假如我真的看透了
 余世维有效沟通
 习惯修养

原文地址：https://www.cnblogs.com/bedfly/p/12295459.html