PC端网页特效

1、offset：动态

获得元素距离带有定位父元素的位置

获得元素自身的大小(宽度高度)，该大小为border-sizing 

 offsetParent返回的是有定位关系的父级，parentNode返回最近一级的父级，无论是否有定位

offset主要用来获取数值，style主要用来修改数值

 

2、client：元素可视区信息

client不包含边框，offsetWidth包含

 

3、scroll：滚动距离

 

 当文字超出盒子时，client只显示盒子大小，scroll显示真实大小

配合onscroll事件

 

4、页面滚动：window.pageXOffset  /  或者先获取html，然后  html.scrollTop

 

5、mouseenter / mouseover  冒泡

mouseenter/mouseleave：鼠标经过元素内容才会执行，其上覆盖其他元素时，经过其他元素不执行

mouseover： 鼠标经过元素区域就会执行，无论其上是否覆盖别的元素

 

6、动画：通过setInterval()不断移动盒子的位置

必须加定位，才可以使用element.style.left

 

7、缓动动画：运动速度有所变化，最常见的就是缓慢停下

1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。

2．核心算法︰步长=(目标值-现在的位置)/ 10  做为每次移动的距离步长，移动数值均匀减小    /   现在的位置：元素移动element.setoffLeft/Right/Top/Bottom    页面移动：window.pageYOffset

 

3．停止的条件是:让当前盒子位置等于目标位置就停止定时器

　　注意第二点：只要涉及除法，都会出现小数的问题，尽量将其改为整数，不要出现小数的问题 Math.ceil(); 往上取整

 

8、函数为不同元素添加不同定时器，优化空间，防止歧义

利用对象，为对象指定timer

// 简单动画函数封装obj目标对象 target 目标位置
        // 给不同的元素指定了不同的定时器
        function animate(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行,且当大于距离后else不执行移动
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    return;
                }
                obj.style.left = obj.offsetLeft + 10 + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        // 调用函数
        animate(div, 300);
        btn.addEventListener('click', function() {
            animate(span, 200);
        })

 

9、节流阀：防止轮播图按钮连续点击造成播放过快。

目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

    function ml() {  //moveleft动画
        if (flag) {
            flag = false;   //阀关闭
            if (loc <= 0 && loc > -2000) {
                loc -= 500;
                console.log(loc);
                animate(ul, loc,function(){  //动画执行完毕，节流阀打开
                    flag = true;
                });
            } 
        }
    }