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
注意步长值要取整!