javascript实现对联广告 滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跟随对联广告javascript</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        body{
            height: 3000px;
        }
        #advertL,#advertR{
            position: absolute;
            top: 250px;
        }
        #advertL{
            left: 100px;
        }
        #advertR{
            right: 100px;
        }
    </style>
</head>
<body>
    <div class="advert">
        <div id="advertL">
            <img src="img/ad.jpg">
        </div>
        <div id="advertR">
            <img src="img/ad.jpg">
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function (){
            // 实现原理,鼠标滚动距离,算出目标位置,然后进行定时器渐变
            var advertL = document.getElementById("advertL");
            var advertR = document.getElementById("advertR");
            var timer = "";
            var distanceY =  advertL.offsetTop;//  初始化位置
            window.onscroll = function (){
                // 浏览器滚动距离
                goOn(document.documentElement.scrollTop || document.body.scrollTop);
            }
            function goOn(range){
                clearInterval(timer);
                // 目标距离 等于初始距离 加上浏览器滚动距离
                var distance = distanceY + range;
                timer = setInterval(function (){
                    var speed = ( distance - advertL.offsetTop ) / 5;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    advertL.style.top = advertR.style.top = advertL.offsetTop + speed+ 'px';
                    if (advertL.offsetTop == distance) {
                        clearInterval(timer)
                    }
                },30);
            }
        }
    </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容