JavaScript学习记录——PC端网页特效

元素偏移量offset

• offset是偏移量 我们可以利用其动态的得到该元素的位置（偏移）、大小等
• 获得的元素距离带有定位父元素的位置 如果父元素没有定位 就以body为标准
• 获得元素自身的大小
• 注意：返回的数值都不带单位

parentNode和offsetParent都可以返回父元素
但是前者返回的是最近一级的父亲 而且不管有无定位都会返回
但是后者必须要有定位

offset和style的区别

元素可视区client

client是客户端，我们使用相关属性来获取元素可视区的相关信息，通过client系列相关属性可以动态的得到元素的边框大小、元素大小等
和offset的最大区别是不包含边框
clientTop-Left可以获得边框大小

立即执行函数

不需要调用 立马自己执行的函数

 (function() {
            console.log(2);
        })()
        //第二个小括号可以看做是调用函数

也可以传递参数进来

 (function(a,b) {
            console.log(a+b);
        })(1,2)

第二种写法

 (function() {
            console.log(2);
        } () )

最大的作用就是创建了一个独立的作用域 里面所有的变量都是局部变量 不会有命名冲突问题

元素滚动scroll

scroll翻译过来就是滚动 使用scroll系列的相关属性就可以动态获得该元素的大小、滚动距离等


和client的区别是 如果内容超过本身大小 显示的是全部的大小（包括超出部分） 但是client不管超出内容 只显示本身的大小

mouseenter和mouseover的区别

• 都是鼠标经过会触发
• 但是mouseover经过自身盒子会触发 经过子盒子还是会触发 而mouseenter
• 只会经过自身盒子的时候触发
• 因为mouseenter不会冒泡
• 跟mouseenter搭配 mouseleave同样不会冒泡

动画函数封装

动画实现原理

核心原理：通过定时器 setInterval（）不断移动盒子的位置

		var timer=setInterval(function() {
            if(div.offsetLeft>=400){
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft+5+'px';
        },30);

简单的动画函数封装

 		var div = document.querySelector('div');
        var span = document.querySelector('span');
        //obj是目标对象 target是目标的位置
        function animate(obj,target){
            var timer=setInterval(function() {
            if(obj.offsetLeft>=target){
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft+5+'px';
        },30);
        }
        animate(div,300);
        animate(span,200);

如果要实现点击按钮才能触发动画的话 有一个情况是：在元素运动的过程中 每点击一次 元素的运行速度会加快 是定时器的累加效应 所以在封装的函数里清除元素的定时器

		function animate(obj,target){
            clearInterval(obj.timer);
            //先清除以前的定时器 再加上新的定时器
            obj.timer=setInterval(function() {
            if(obj.offsetLeft>=target){
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft+5+'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);
        })

缓动效果原理

思路：
让盒子每次移动的距离慢慢变小 最后速度就会慢慢降下来
核心算法：（目标值-现在的位置）/10 作为每次移动距离的步长
停止条件：让当前盒子位置等于目标位置就停止定时器

 		//obj是目标对象 target是目标的位置
        function animate(obj,target){
            clearInterval(obj.timer);
            //先清除以前的定时器 再加上新的定时器
            obj.timer=setInterval(function() {
            //步长值要写在定时器的里面
            var step =  Math.ceil((target-obj.offsetLeft)/10);
            //为了避免小数情况影响最终left值不能达到200 所以进行向上取整
            if(obj.offsetLeft==target){
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft+step+'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);
        })

常见的网页特效

节流阀

目的：当上一个函数动画内容执行完毕后 再去执行下一个函数动画 让事件无法连续触发
核心实现思路：利用回调函数 添加一个变量来控制 锁住函数和解锁函数