JavaScript 特效:两侧跟随的广告

最新推荐文章于 2022-11-16 18:31:21 发布

VIP文章 houyanhua1

最新推荐文章于 2022-11-16 18:31:21 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/79586080

版权

demo.html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .img1 {
            position: absolute;
            top: 80px;
            left: 10px;
        }
        .img2 {
            position: absolute;
            top: 80px;
            right: 10px;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：屏幕滚动多少，两侧的图片联动向下移动等距离。
            //步骤：
            //1.老三步
            //2.获取被卷去的头部的值
            //3.移动两个盒子。（缓动移动）

            //1.老三步
            var imgArr = document.getElementsByTagName("img");

            window.onscroll = function () {
                //2.获取被卷去的头部的值
                var val = scroll().top;
                //3.移动两个盒子。（缓动移动）
                animate(imgArr[0],val+80);
                animate(imgArr[1],val+80);
            }

        }
    </script>

</head>
<body>
    <img class="img1" src="images/aside.jpg"/>
    <img class="img2" src="images/aside.jpg"/>
    <div>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细

最低0.47元/天解锁文章

houyanhua1

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 特效:两侧跟随的广告

demo.html： Document .img1 { position: absolute; top: 80px; left: 10px; } .img2 { position: absolute;
复制链接

扫一扫