javaScript动画2 scroll家族

 offsetWidth和offsetHight （检测盒子自身宽高+padding+border）

这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

offset宽/高  =  盒子自身的宽/高+ padding +border；

offsetWidth = width+padding+border；

offsetHeight = Height+padding+border；

offsetLeft和offsetTop  （检测距离父盒子有定位的左/上面的距离）

返回距离上级盒子（带有定位）左边s的位置

如果父级都没有定位则以body为准

offsetLeft 从父亲的padding 开始算,父亲的border 不算。

在父盒子有定位的情况下，offsetLeft == style.left(去掉px)

offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。

而style.left不可以

二、offsetTop 返回的是数字，而style.top 返回的是字符串，除了数字外还带有单位：px。

三、offsetTop 只读，而style.top 可读写。（只读是获取值，可写是赋值）

四、如果没有给HTML 元素指定过top 样式，则style.top 返回的是空字符串。

style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）

三个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三个函数</title>
</head>
<body>


<script>
    var num =1.5;
    console.log(Math.ceil(num));//向上取整
    console.log(Math.floor(num));//最接近它的整数，它的值小于或等于这个浮点数
    console.log(Math.round(num));//四舍五入
</script>
</body>
</html>

 缓动动画体验

1、封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动动画体验()</title>
    <style>
        div{
             100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            /*left: 400px;*/
        }
    </style>
</head>
<body>
    <button>运动到400</button>
    <div></div>

    <script>
        var btn=document.getElementsByTagName("button")[0];
        var div=document.getElementsByTagName("div")[0];

        var timer = null;
        btn.onclick = function () {
            //调用定时器先清除定时器
            clearInterval(timer);
            timer = setInterval(function () {
                var target = 400;
                //缓动：如何缓动？步长越来越小
                //公式：盒子位置=(目标位置-盒子为本身位置)/10
                //最后十像素的时候都1像素1像素的向目标位置移动，就能够到达指定位置

                var step = ( target - div.offsetLeft)/10;

                //拓展：差值大于0的时候，向上取整，小于0的时候向下取整。
                // var step = Math.ceil((400 - div.offsetLeft)/10);
                step = step>0?Math.ceil(step):Math.floor(step);

                //动画原理：盒子未来的位置 = 盒子当前的位置+步长
                console.log(step);
                div.style.left = div.offsetLeft + step + "px";
                if(Math.abs(0 - div.offsetLeft)<Math.abs(step)){
                    clearInterval(timer);
                }

            },30);
        }





    </script>
</body>
</html>

 2、完整封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动动画体验()</title>
    <style>
        div{
             100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            /*left: 400px;*/
        }
    </style>
</head>
<body>
    <button>运动到200</button>
    <button>运动到400</button>
    <div></div>

    <script>
        var btn=document.getElementsByTagName("button");
        var div=document.getElementsByTagName("div")[0];

        // var timer = null;
        btn[0].onclick = function () {
            animate(div,200)
        };
        btn[1].onclick = function () {
            animate(div,400)
        };


        //缓动动画封装
        function animate(ele,target) {
            //调用定时器先清除定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //缓动：如何缓动？步长越来越小
                //公式：盒子位置=(目标位置-盒子为本身位置)/10
                //最后十像素的时候都1像素1像素的向目标位置移动，就能够到达指定位置

                var step = ( target - ele.offsetLeft)/10;

                //拓展：差值大于0的时候，向上取整，小于0的时候向下取整。
                // var step = Math.ceil((400 - div.offsetLeft)/10);
                step = step>0?Math.ceil(step):Math.floor(step);

                //动画原理：盒子未来的位置 = 盒子当前的位置+步长

                ele.style.left = ele.offsetLeft + step + "px";
                console.log(1);
                if(Math.abs(target - ele.offsetLeft)<=Math.abs(step)){
                    ele.style.left=target + "px";
                    clearInterval(ele.timer);
                }
            },30);
        }





    </script>
</body>
</html>

 scrool方法的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 5000px;
             5000px;
        }
    </style>
</head>
<body>




<script>
    //需求：封装一个兼容的scrool的方法

    window.onscroll = function () {
        // var json=scroll();
        // console.log(json);

        console.log(scroll().top);
        console.log(scroll().left);
    };

    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": document.body.scrollTop || document.documentElement.scrollTop ||window.pageYOffset ,
        //     "left": document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset
        // };
    }
</script>

</body>
</html>

 案例-筋斗云

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 5000px;
            width: 5000px;
        }
    </style>
</head>
<body>




<script>
    //需求：封装一个兼容的scrool的方法

    window.onscroll = function () {
        // var json=scroll();
        // console.log(json);

        console.log(scroll().top);
        console.log(scroll().left);
    };

    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": document.body.scrollTop || document.documentElement.scrollTop ||window.pageYOffset ,
        //     "left": document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset
        // };
    }
</script>

</body>
</html>
筋斗云

案例-导航栏固定

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;

        }

        #Q-nav1 {
            overflow: hidden;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

    <!--引入工具js-->
    <script src="my.js"></script>
    <script>
        window.onload = function () {
            //需求1：当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            //需求2：当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed
            //步骤：
            //1.老三步。
            //2.判断 ，被卷曲的头部的大小
            //3.满足条件添加类，否则删除类


            //1.老三步。
            var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");

            window.onscroll = function () {
                //被卷曲的头部的大小满足条件添加类，否则删除类
                if(scroll().top >height){
                    //满足条件添加类
                    middle.className += " fixed";
                    //第二个盒子不占位置了，所以我们给第三个盒子一个padding，不出现盒子抖动
                    main.style.paddingTop = middle.offsetHeight+"px";
                }else {
                    //否则删除类
                    middle.className = "";
                    //清零
                    main.style.paddingTop = 0;
                }
            }
            //2.判断 ，被卷曲的头部的大小

            //3.满足条件添加类，否则删除类


        }


    </script>
</head>
<body>
<div class="top" id="top">
    <img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
    <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
    <img src="images/main.png" alt=""/>
</div>
</body>
</html>
html
/**
 * Created by andy on 2015/12/8.
 */
function scroll() {  // 开始封装自己的scrollTop
    if(window.pageYOffset !== undefined) {  // 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
    }
}

//缓动动画封装
function animate(ele,target) {
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        var step = (target-ele.offsetLeft)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        ele.style.left = ele.offsetLeft + step + "px";
        console.log(1);
        if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
            ele.style.left = target + "px";
            clearInterval(ele.timer);
        }
    },18);
}
my.js

返回顶部

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
        //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
        //技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
        //步骤：
        //1.老三步
        window.onload = function () {

            var img= document.getElementsByTagName("img")[0];
            window.onscroll = function () {
                //2 备选区域大于200显示小火箭
                if(scroll().top>200){
                    img.style.display = "block";
                }else{
                    img.style.display = "none";
                }
                //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
                leader=scroll().top;
            };
                //3 缓动跳转到也看最顶端(利用我们的缓动动画)
                var timer = null;
                var target = 0;//目标位置
                var leader=0;//屏幕显示区域自身的位置
                window.onclick = function() {
                    //技术点：window.scrollTo(0,0); window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
                    //先清除定时器
                    clearInterval(timer);
                    timer = setInterval(function () {
                        //获取步长
                        var step = (target-leader)/10;
                        //二次处理步长
                        setp = step>0?Math.ceil(step):Math.floor(step);
                        leader = leader +step;
                        //让显示区域移动
                        window.scrollTo(0,leader);
                        //清除定时器
                        if(leader === 0){
                            clearInterval(timer);
                        }
                    },20)
                }



        }
    </script>

</head>
<body>
    <img src="images/Top.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>

    </div>
</body>
</html>
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;
}
animate.js
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhangkui/p/8797024.html