Javascript学习笔记----11PC端网页特效

offset系列常见属性：

与style区别：

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

写法：

1.（function（）{}）（）

2.（function（）{}（））

三大系列总结：

mouseover和mouseenter区别(面试常问！！！）：

mouseover经过自身盒子会触发事件，经过子盒子还会触发，而mouserenter（mouseleave同理）只经过自身盒子触发事件。

原因:mouseenter不会冒泡

动画：

<script>
//动画原理
//1.获得盒子对象
//2.让盒子在当前位置加上1个移动距离
//3.利用定时器不断重复这个操作
//4.加一个结束定时器的条件
//动画函数封装
function animate(obj,target,callback){
//先清除以前的定时器，只保留一个定时器
clearInterval(obj.timer);   
obj.timer=setInterval(function(){
if(obj.offsetLeft>=target){
//停止动画，本质是停止计时器
clearInterval(obj.timer);
if(callback){
    callback();
}
}
obj.style.left=obj.offsetLeft+1+'px';
},30);
}
var div=document.querySelector('div');
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
    animate(div,100,function(){
        div.style.backgroundColor='red';//回调函数
    });
})
</script>

缓动动画公式：每次移动的步长=（目标值-现在的位置）/10

注意步长值要取整！