js 兩側廣告滾動Demo

<!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>
        window.onload = function () {
            //需求:屏幕滾動多少,兩側的圖片聯動向下移動等距離。
            //步驟:
            //1.老三步
            //2.獲取被捲去的頭部的值
            //3.移動兩個盒子。(緩動移動)

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

            window.onscroll = function () {
            var val=scroll().top;
            animate(imgArr[0],val);
            animate(imgArr[1],val);
            }
            function scroll(){
                return {
                    top:document.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,
                    left:document.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft
                }
            }
            // 緩動動畫
            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(Math.abs(target-ele.offsetTop)<Math.abs(step)){
                ele.style.top=target+'px';
                }
            },30)
            }

        }
    </script>

</head>
<body>
    <img class="img1" src="images/aside.jpg"/>
    <img class="img2" src="images/aside.jpg"/>
    <div>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
        水垢何曾相受,細看兩俱無有,寄語揩揹人,輕手,輕手,居士本來無垢.....<br>
    </div>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章