PC端网页特效

元素偏移量offset
获取元素距离带有定位父元素的位置
获取元素自身的大小。高度和宽度
注意:返回的数值都不带单位。

offsetParent该属性返回的是父及元素的对象。必须返回带有定位父及，如果没有找到body。parentNode,返回最近的父及，父及不需要定位。

立即执行函数：（function() {})(),作用是创建一个独立的作用域。不需要单独调用它。
也可以写作（function(形参) {} (实参)），多个立即执行函数之间用分号隔开。也可以给匿名函数声明函数名，如（function fun() {})()

pageshow:重新加载页面触发的事件。
Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。


scroll元素属性：


页面被卷去头部用window.pageYOffset获取宽度，如果是水平用window.pageXOffset.注意：元素被卷去的头部是element.scrollTop.



以上三个主要用法：
offset系列经常用于获取元素位置： offsetLeft offsetTop
client经常用于获取元素的大小：clientWidth clientHeight
scroll经常用于获取滚动距离: scrollTop scrollLeft
注意页面滚动的距离通过window.pageXOffset获得。

mouseover和mouseenter的区别：
mouseover鼠标经过自身盒子会触发，经过子盒子也会触发，mouseenter只经过自身盒子会触发。
moseover子盒子没有触发事件就会根据冒泡事件到父盒子，而父盒子有冒泡事件就会触发.mouseenter没有冒泡事件。同样mouseleave也没有冒泡事件。

动画实现原理：
通过定时器不断移动盒子的位置。实现该原理最重要是在盒子上加上绝对定位。

	 function animate(obj,target) {
        obj.time = setInterval(function() { //obj得到参数是对象，obj.time是给对象赋值。为什么这么做，
                                            //因为如果声明为var time，就会每次调用时在内存中就会开辟新的空间，这样就			  会很占用资源。
                                            //对象已经在内存开辟空间，直接给对象的属性赋值，就不会在开辟新的空间。当然每个对象的定时器也不同。
                                            
            if (obj.offsetLeft >= target) {
                clearInterval(obj.time);
            }
            obj.style.left = obj.offsetLeft + 3 + 'px';
        },50)
    }
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    animate(div,400);
    animate(span,200);

减缓动画：

		function slowAnimate(obj,target) {
        obj.time = setInterval(function(){
            var step = (target - obj.offsetLeft) /10; //计算步长的公式.每次移动多长距离，每次得步长在减少
            if (obj.offsetLeft == target) {
                clearInterval(obj.time);

            }
            obj.style.left = obj.offsetLeft + step + 'px';//每次移动的距离加上之前距离body左边距离就是它总共距离左边的距离
        },20)
    }
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    slowAnimate(div,400);
    slowAnimate(span,300);

click();此方法是手动调用事件，比如：btn.addEventLiatener(‘click’,function(){})可以写成btn.click(),实现得功能一样。

节流阀：
目的是防止轮播图按钮连续点击造成播放过快。
节流阀原理是当上一个动画函数执行完毕，再去执行下一个函数动画，让事件无法连续触发。
思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。比如先设置变量 flag = true，然后if（flag）{flag = false；回调函数}，因为把flag设置为false，其他函数无法执行，等到回调函数执行完毕，把false改为true，其他函数才能执行。

滚动窗口至文档中特定的位置。window.scroll(x,y);x x,y不需要带单位。