码迷，mamicode.com
首页 > 编程语言 > 详细

javaScript动画2 scroll家族

时间：2018-04-11 18:08:23      阅读：193      评论：0      收藏：0      [点我收藏+]

标签：eth   overflow   src   param   efi   enter   案例   pre   onclick   

 

三个函数

<!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{
            width: 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{
            width: 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;
            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 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

 

javaScript动画2 scroll家族

标签：eth   overflow   src   param   efi   enter   案例   pre   onclick   

原文地址：https://www.cnblogs.com/zhangkui/p/8797024.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！