Javascript中缓动动画函数实例

scroll系列属性

scrollTop/scrollLeft/ScrollWidth/scrollHeight
overflow:auto 使滑动自动显示
页面被卷去的头部:可以通过window.pageYOffset获得如果是被卷的是左window.pageXoffset
注意，元素被卷去的头部是elent.scollTop ,如果是页面被卷去的头部则是window.pageYoffset

<body>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box1 {
            width: 400px;
            height: 200px;
            background-color: rgb(37, 150, 47);
            margin: 10px auto;

        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: rgb(37, 127, 150);
            margin: 10px auto;
        }

        .box3 {
            width: 400px;
            height: 1000px;
            background-color: rgb(141, 37, 150);
            margin: 10px auto;
        }

        .aside {
            position: absolute;
            width: 50px;
            height: 150px;
            background-color: rgb(141, 133, 26);
            top: 300px;
            right: calc(50% - 250px);
            padding: 10px;
            padding-top: 30px;
            text-align: center;
            border-radius: 10px;
        }
        .aside span{
            display: none;
            cursor: pointer;
        }
    </style>
     <div class="aside"><span>返回顶部</span></div>
    <div class="box1">盒子一</div>
    <div class="box2">盒子二</div>
    <div class="box3">盒子三</div>

    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        var box3 = document.querySelector('.box3');
        var asidese = document.querySelector('.aside');
        var bon = asidese.offsetTop - box2.offsetTop
        document.addEventListener('scroll', function () {
            console.log(box2.offsetTop);
            console.log('aside的距离'+asidese.offsetTop);
            if (pageYOffset >= box2.offsetTop) { 
                asidese.style.position = 'fixed';
                asidese.style.top = bon + 'px'
            }
            else{
                asidese.style.position = 'absolute';
                asidese.style.top = '300px'
            }
            if (pageYOffset >= box3.offsetTop) { 
                asidese.children[0].style.display = 'block';
            }else{
                asidese.children[0].style.display = 'none';
            }
        })
        console.log("box3的值"+box3.offsetTop);
        var btn = asidese.children[0];
        console.log(asidese.children[0]);
        btn.addEventListener('click',function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        })
    </script>

Javascript中缓动动画函数实例

三大系列的对比

offsetWidth 返回自身，并且包括padding，border，不带单位,经常用于获取元素的位置
clientWidth 返回自身，但是不包括border,包括padding，经常用于获取元素的大小
scrollWidth 返回自身实际的宽度，元素的内容，但是不含边框返回数值不带单位经常用于获取滚动的距离， 注意 页面滚动通过 window.pageXoffset 获得,元素滚动距离通过 scrollTop 或者 scrollLeft 获取

mouseover和mouseenter的区别

mouseover ：鼠标经过自身盒子触发，子盒子也会触发
mouseenter ：鼠标经过自身盒子才会触发，不会进行冒泡处理

动画函数的封装

动画原理：使用定时器+元素定位+元素offset
给不同元素指定不同的定时器
缓动动画的原理：使用动画缓动执行，使速度慢慢停下来（目标值-现在的位置）
缓动动画需要将步长值改为整数，使用Math.ceil函数向上取整
缓动动画也可以添加回调函数

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: rgb(6, 143, 153);
        }
        span{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 210px;
            margin-left: 100px;
            background-color: rgb(21, 8, 139);
        }
    </style>

    <div class="box"></div>
    <span></span>
    <script>
        var box = document.querySelector('.box');
        var span =document.querySelector('span')
        function animate(obj, target) {
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    clearInterval(timer)
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 150)
        }
        var box1= animate(box, 800);
        var span1 = animate(span,900)
    </script>

<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            position: absolute;
            display: block;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 100px 0;
            background-color: rgb(6, 143, 153);
        }

        span {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 200px 0;
            background-color: rgb(21, 8, 139);
        }
    </style>

    <div class="box"></div>
    <span></span>
    <script>
        var box = document.querySelector('.box');
        var span = document.querySelector('span');

        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15)
        }
        var box1 = animate(box, 800, function () {
            box.style.display = 'none'
        });
        var span1 = animate(span, 900)
    </script>

缓动函数封装地址

【函数地址】

利用缓动函数做一个鼠标触碰后移动的案例

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            width: 100%;
            overflow-x: hidden;
        }
        .container,.box,.box2{
            border-radius: 10px 0 0 10px;
        }
        .container {
            position: absolute;
            right: 0px;
            bottom: 50px;
            width: 50px;
            height: 50px;
            background-color: rgb(83, 3, 3);
        }

        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 0;
            bottom: 0px;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: rgb(42, 23, 94);
        }

        .box2 {
            position: absolute;
            right: -150px;
            bottom: 0;
            width: 150px;
            height: 50px;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: rgb(42, 23, 94);
        }
    </style>
    <div class="container">
        <div class="box">&lt;</div>
        <div class="box2">你好世界</div>
    </div>
    <script>
        var container = document.querySelector('.container');
        var box2 = document.querySelector('.box2');
        var box = document.querySelector('.box');
        container.addEventListener('mouseover', function () {
            animate(box2, -140, 15);
            box.innerHTML = '&gt;';
        })
        container.addEventListener('mouseout', function () {
            animate(box2, 140, 15);
            box.innerHTML = '&lt;'
        })
    </script>
    <script src="https://cdn.jsdelivr.net/gh/Rr210/[email protected]/hexo/4/animate.js"></script>

</body>

</html>

Javascript中缓动动画函数实例

Javascript中缓动动画函数实例

scroll系列属性

三大系列的对比

mouseover和mouseenter的区别

动画函数的封装

缓动函数封装地址

利用缓动函数做一个鼠标触碰后移动的案例

继续阅读

用JS模拟实现二叉树(含遍历)

Compile workrave under windows &ndash; My exprience 在Windows上编译Workrave

门户通专访草根站长九天狼：做站贵在坚持

如何成为一名.net 工程师?

tabpanel 使用问题

为什么把CSS放头部，script放下面

关于 underscore 中模板引擎的应用示例

【JavaScript语法】函数对象的浅拷贝、深拷贝

CSS之折叠菜单

JS--运算符

数组和类数组

web开发之前后端渲染

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo