对联广告 

<!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>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<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>
//缓动动画封装
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";
        console.log(1);
        if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
            ele.style.top = target + "px";
            clearInterval(ele.timer);
        }
    },25);
}
/**
 * Created by andy on 2015/12/8.
 */
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
    }
}
/**
 * Created by Lenovo on 2016/9/2.
 */
/**
 * 通过传递不同的参数获取不同的元素
 * @param str
 * @returns {*}
 */
function $(str){
    var str1 = str.charAt(0);
    if(str1==="#"){
        return document.getElementById(str.slice(1));
    }else if(str1 === "."){
        return document.getElementsByClassName(str.slice(1));
    }else{
        return document.getElementsByTagName(str);
    }
}

/**
 * 功能：给定元素查找他的第一个元素子节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getFirstNode(ele){
    var node = ele.firstElementChild || ele.firstChild;
    return node;
}

/**
 * 功能：给定元素查找他的最后一个元素子节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getLastNode(ele){
    return ele.lastElementChild || ele.lastChild;
}

/**
 * 功能：给定元素查找他的下一个元素兄弟节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getNextNode(ele){
    return ele.nextElementSibling || ele.nextSibling;
}

/**
 * 功能：给定元素查找他的上一个兄弟元素节点，并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function getPrevNode(ele){
    return ele.previousElementSibling || ele.previousSibling;
}

/**
 * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
 * @param ele 元素节点
 * @param index 索引值
 * @returns {*|HTMLElement}
 */
function getEleOfIndex(ele,index){
    return ele.parentNode.children[index];
}

/**
 * 功能：给定元素查找他的所有兄弟元素，并返回数组
 * @param ele
 * @returns {Array}
 */
function getAllSiblings(ele){
    //定义一个新数组，装所有的兄弟元素，将来返回
    var newArr = [];
    var arr = ele.parentNode.children;
    for(var i=0;i<arr.length;i++){
        //判断，如果不是传递过来的元素本身，那么添加到新数组中。
        if(arr[i]!==ele){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

　　

posted @ 2017-03-22 18:41  北漂阿猫  阅读(198)  评论(0)    收藏  举报