JS的offset，client，scroll，立即执行函数，动画练习

元素偏移量offset

可以利用offset相关属性动态的获得该元素的位置（偏移）、大小等。

注意：返回的数值都不带单位。

element.offsetParent,返回的是带有定位的父级元素；

element.parentNode,返回的是父元素，不管带不带定位；

offset和style的区别

1. offset

• 可以得到任意样式表的样式值
• offsetWidth包含padding+border+width
• offsetWidth是只读属性，只能获取不能赋值

2. style

• 只能得到行内样式表中的样式值
• style.width获得不包括border和padding的值
• style.width是可读写属性，可获取也可赋值

元素可视区client

element.clientWidth和element.offsetWidth最主要的区别就是client返回的是不带border的大小。

元素滚动scroll

scroll事件，当滚动滚动条触发的事件。 注意：

• scrollTop返回的是内容区的顶部和元素视口的距离（元素被卷去的头部）；
• 页面被卷去的头部可以用window.pageYOffset获得，被卷去左侧可以用window.pageXOffset获得（但有兼容性问题）。

scrollHeight返回的是内容区的高度，如果内容区没有超出元素高度则返回的是不带边框的元素高度。

立即执行函数

不需要调用就会自动执行，作用：独立创建了一个作用域，里面的变量都是局部变量。

1. (function(){})()
2. (function(){}())

// 即使用了同名的变量也不会报错，因为都是局部变量
        (function(){
            var num = 1;
            console.log(num);
        })();

        (function(){
            var num = 2;
            console.log(num);
        }())

pageshow事件

pageshow事件在页面显示时触发，无论页面是否来自缓存，重新加载页面时pageshow会在load事件触发后触发；根据事件对象中的persisted来判断页面是否来自缓存。

window.addEventListener('pageshow',function(e){
            // 页面来自缓存
            if(e.persisted){
                alert(1);
            }else{
                alert(2);
            }
        })

mouseover和mouseenter的区别

当鼠标移动到元素上时会触发mouseover和mouseenter事件，但两者有所区别：

• mouseover鼠标经过盒子自身或者子盒子都会触发，因为mouseover会发生冒泡
• mouseenter不会冒泡，跟mouseenter搭配的鼠标离开事件mouseleave也不会冒泡

动画

动画原理：利用定时器和盒子的位置以达到盒子移动的效果；

缓动动画：让盒子每次移动的距离按照一定的规律变化；

• 回调函数原理：函数作为一个参数传到另一个函数内，当传入回调函数的函数前面的部分执行完后，再执行回调函数，这个过程称为回调。
• 缓动动画的回调函数一般写在定时器清除之后，即完成动画之后执行相关函数

练习

练习