前端JS-Day21

client系列：获得可视区域的相关信息

clientWidth和offsetWidth区别：clientWidth只包含内容和padding，offsetWidth包含内容和内外边框。

 

 

 

 

 

立即执行函数：无需调用，直接执行。且独立创建了一个作用域。

(function() {})()；  (function(){}())；  两种写法

像素比：即devicePixelRatio值。

pageshow事件：重新加载页面触发的事件。

pageshow和load区别：往返缓存的存在

 

scroll系列：获取动态变化的元素属性

 

 

scrollWidth相较于offset和client仅返回自身宽度。

scrollTop属性：

 

 window.pageXOffset和window.pageYOffset为整个页面被卷曲的距离。

 

 三大系列总结：

 

offset系列：用于获取元素位置，offsetLeft和offsetTop。

client系列：用于获取元素大小，clientWidth和clientHeight。

scroll系列：用于获取滚动距离，scrollTop和scrollLeft。

页面滚动距离获取：window.pageXOffset和window.pageYOffset。

 

mouseover和mouseenter区别：mouseover经过自身和子元素都会触发事件，mouseenter仅经过自身会触发事件。所以mouseenter不会触发冒泡。

 

 

JS动画：目标对象是绝对定位

 

对动画函数进行封装后，不同对象对函数进行调用会造成不同对象使用相同定时器造成浪费，故采用分别设置定时器方法。

利用js动态语言的特点，给对象设置属性的特点，给对象设置定时器；

 

 // 封装函数,obj目标对象,target目标位置,sec定时时长,len单位时间位移距离
        function animations(obj, target, sec, len) {
            clearInterval(obj.timer); 
            // 防止函数多次进行,保证对象仅有一个定时器.
            obj.timer = setInterval(()=> {
                // 利用给对象设置属性的方式,给对象设置定时器.
                if(div.offsetLeft >= target) {
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + len + 'px';
            }, sec);
        }

 

缓动动画：令元素运动速度有所变化，常见例如令元素慢慢停下。

 

 

 动画在多个目标值间移动：

步长若是正数则向上取整，反之向下取整。

 

function animations(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(() => {
                let len = target - obj.offsetLeft;
                let step = len > 0 ? Math.ceil(len / 10) : Math.floor(len / 10);
                // 将步长值转化为整数,防止误差.
                if (div.offsetLeft == target) {
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }