zoukankan      html  css  js  c++  java
  • JS实现右侧悬浮框随着页面的上下轮动而移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div{
                 200px;
                height: 100px;
                background: red;
                position: absolute;
                right: 0;
                bottom: 40%;
            }
        </style>
        <script>
            window.onscroll = function () {
                var oDiv = document.getElementById('div');
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                //oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
                startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
            };
            var time = null;
            function startMove(iTarget){
                var oDiv = document.getElementById('div');
                clearInterval(time);
                time = setInterval(function(){
                    var speed = (iTarget-oDiv.offsetTop)/6;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    if(oDiv.offsetTop == iTarget){
                        clearInterval(time)
                    }else{
                        oDiv.style.top = oDiv.offsetTop+speed+'px';
                    }
                },30)
            }
        </script>
    </head>
    <body style="height: 2000px;">
        <div id="div"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    rpm常见命令使用说明
    终端传值给Makefile、Makefile传值给C++代码
    redis实现异步队列
    redis实现分布式锁
    正则表达式
    nginx安装
    metaq
    zeromq
    ActiveMq
    http压力测试
  • 原文地址:https://www.cnblogs.com/520yh/p/13790535.html
Copyright © 2011-2022 走看看