运动——对联悬浮框

代码：
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div {
            width: 100px;
            height: 150px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
       // window.onscroll 滚动页面时触发
        window.onscroll=function() {
            var oDiv = document.getElementById("div");
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//一般只用前者
            startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop));
            //clientHeight:内容可视区域的高度,其中变量主要表示高度在页面浏览器所能看到的区域中央
        };
        var  timer=null;//timer一定要放在函数外，clearInterval(timer)才能起作用

        function startMove(iTarget){
               var oDiv = document.getElementById("div");

               clearInterval(timer);//保证函数中永远只有一个定时器，防止效果叠加，比如运动不断加速或透明度不断加大
               timer=setInterval(function(){
                   var speed=(iTarget-oDiv.offsetTop)/4;//4 只是用来设置速度快慢，可以自定义（越大速度越慢）
                   speed=speed>0?Math.ceil(speed):Math.floor(speed);
                   //Math.ceil():向上取整；Math.floor()向下取整；取整speed是为了防止speed和iTarget有误差而导致窗口在悬浮位置抖动
                   if(oDiv.offsetTop==iTarget){
                       clearInterval(timer);
                   }else{
                       document.title=iTarget;//获取当前目标的值
                       document.getElementById("txt").value=oDiv.offsetTop;
                       oDiv.style.top=oDiv.offsetTop+speed+'px';

                   }
               },30);



        }
    </script>
</head>

<body style="height:2000px;">
<input type="text" id="txt" style="position:fixed; right:0; top:0;"/>

<div id="div"></div>
</body>
</html>
运行结果：
　　初始界面：
 　　　　　　
 　
　　不断滑动页面滚动条之后界面：
posted on 2016-03-11 12:23 Newbie_小白阅读(381) 评论(0) 编辑收藏举报