動畫封裝animate和scroll，廣告跟隨完整代碼案例

function animate(ele,target) {
            //要用定時器，先清定時器
            //一個蘿蔔一個坑兒，一個元素對應一個定時器
            clearInterval(ele.timer);
            //定義定時器
            ele.timer = setInterval(function () {
                //獲取步長
                //步長應該是越來越小的，緩動的算法。
                var step = (target-ele.offsetTop)/10;
                //對步長進行二次加工(大於0向上取整,小於0項下取整)
                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);
                }
            },30);
        }

function scroll(){
            //如果這個屬性存在，那麼返回值應該是0-無窮大
            //如果沒有返回值是undefined；
            //只要判斷不是undefined就可以調用此方法
            //練習使用此種封裝
            if(window.pageYOffset !== undefined){
//                var json = {
//                    "top": window.pageYOffset,
//                    "left": window.pageXOffset
//                };
//                return json;
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

            //簡單封裝（實際工作使用）
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }
        }

<!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);
            }

        }
        function animate(ele,target) {
            //要用定時器，先清定時器
            //一個蘿蔔一個坑兒，一個元素對應一個定時器
            clearInterval(ele.timer);
            //定義定時器
            ele.timer = setInterval(function () {
                //獲取步長
                //步長應該是越來越小的，緩動的算法。
                var step = (target-ele.offsetTop)/10;
                //對步長進行二次加工(大於0向上取整,小於0項下取整)
                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);
                }
            },30);
        }
        function scroll(){
            //如果這個屬性存在，那麼返回值應該是0-無窮大
            //如果沒有返回值是undefined；
            //只要判斷不是undefined就可以調用此方法
            //練習使用此種封裝
            if(window.pageYOffset !== undefined){
//                var json = {
//                    "top": window.pageYOffset,
//                    "left": window.pageXOffset
//                };
//                return json;
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

            //簡單封裝（實際工作使用）
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }
        }
    </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>

動畫封裝animate和scroll，廣告跟隨完整代碼案例

(1)小程序學習20200629

textarea根據內容自動增加高度

vue學習基礎（5）組件屬性傳值/傳值和傳引用、註冊事件

vue學習基礎（6）生命週期鉤子函數、slot插槽的使用、動態組件和緩存

node.js學習（五）Express安裝入門與模塊引擎ejs

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結