JS悬浮浮动的简单例子

发布时间:2020-05-15编辑:脚本学堂
分享一例简单的js代码,实现悬浮浮动的效果,并提供了实现思路,供大家参考,感兴趣的朋友不妨看看。

本节内容:
JS实现侧悬浮浮动
 
思路分析:
首先,加载onscroll控制滚动条
然后,写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点。
最后将其参数返回。再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数。

例子:
 

复制代码 代码示例:
<head runat="server">
    <title>JS悬浮浮动-www.jb200.com</title>
    <style type="text/css">
        #div1
        {
            width: 200px;
            height: 200px;
            background: #0000FF;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script type="text/javascript">
        window.onscroll = function () {
            var oDiv = document.getElementById('div1');
            var DivScroll = document.documentElement.scrollTop || document.body.scrollTop;  //获取移动高度
            //                        oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
            move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll));    //调用传参,其中里面的参数是DIV要走的终点。也就是(可视高度-DIV高度)/2+移动高度
        };
        var timer = null;
        function move(end) {
            clearInterval(timer);   //首先,先关闭之前如果有开启的setInterval;
            timer = setInterval(function () {      
                var oDiv = document.getElementById('div1'); // www.jb200.com
                var speed = (end - oDiv.offsetTop) / 5;     //计算DIV要走的速度,DIV要走的速度就等于(终点-offsetTop高度)/缩放系数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //为了避免小数,将其取整
                if (oDiv.offsetTop == end) { //当DIV到达终点,则关闭setInterval;
                    clearInterval(timer);
                }
                else {
                    oDiv.style.top = oDiv.offsetTop + speed + 'px';     //移动div
                }
            }, 30);
        }
    </script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>