两侧跟随广告

最新推荐文章于 2021-11-06 16:43:25 发布

zuo_zuo_blog

最新推荐文章于 2021-11-06 16:43:25 发布

阅读量1.7k

点赞数 2

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/89548836

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .imag1{
            position: absolute;
            top:80px;
            left: 10px;
        }
        .imag2{
            position: absolute;
            top:80px;
            right: 10px;
        }
        div{
            width:1210px;
            margin: 100px auto;
            text-align: center;
            font:500 26px/89px "微软雅黑";
            color: red;
        }
    </style>
    <script>
        window.onload=function () {
            //屏幕滚动多少，两车图片联动向下滚动等距离
            //获取
            var imgArr=document.getElementsByTagName("img");
            window.onscroll=function () {
                //2.获取被卷曲的头部的值
                var val=scroll().top;
                //3.移动两个盒子
                animate(imgArr[0],val+80);
                animate(imgArr[1],val+80);
            }


            //缓动动画封装
            function  animate(ele,target) {
                clearInterval(ele.timer);
                ele.timer=setInterval(function () {
                    var step=(target-ele.offsetTop)/10;
                    //对步长进行二次加工
                    step=step>0?Math.ceil(step):Math.floor(step);
                    //动画原理:目标位置=当前位置+步长
                    ele.style.top=ele.offsetTop+step+"px";
                    if(target ==ele.offsetTop) {
                        clearInterval(ele.timer);
                    }
                },25);
            }



            function scroll() {  // 开始封装自己的scrollTop
                if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
                    // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
                    return {
                        left: window.pageXOffset,
                        top: window.pageYOffset
                    }
                }
                else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
                    return {
                        left: document.documentElement.scrollLeft,
                        top: document.documentElement.scrollTop
                    }
                }
                return {   // 未声明 DTD
                    left: document.body.scrollLeft,
                    top: document.body.scrollTop
                }
            }

        }
    </script>
</head>
<body>
    <img class="imag1" src="images/aside.jpg" alt="">
    <img class="imag2" src="images/aside.jpg" alt="">
    <div>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
        知否知否，是否绿肥红瘦<br>
    </div>
</body>
</html>

封装部分

  //缓动动画封装
            function  animate(ele,target) {
                clearInterval(ele.timer);
                ele.timer=setInterval(function () {
                    var step=(target-ele.offsetTop)/10;
                    //对步长进行二次加工
                    step=step>0?Math.ceil(step):Math.floor(step);
                    //动画原理:目标位置=当前位置+步长
                    ele.style.top=ele.offsetTop+step+"px";
                    if(target ==ele.offsetTop) {
                        clearInterval(ele.timer);
                    }
                },25);
            }

滚动事件封装

   function scroll() {  // 开始封装自己的scrollTop
                if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
                    // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
                    return {
                        left: window.pageXOffset,
                        top: window.pageYOffset
                    }
                }
                else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
                    return {
                        left: document.documentElement.scrollLeft,
                        top: document.documentElement.scrollTop
                    }
                }
                return {   // 未声明 DTD
                    left: document.body.scrollLeft,
                    top: document.body.scrollTop
                }
            }