JavaScript基础学习之BOM-pc端网页特效

最新推荐文章于 2024-10-31 17:28:42 发布

m0_60081294

最新推荐文章于 2024-10-31 17:28:42 发布

阅读量73

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/m0_60081294/article/details/129820565

版权

文章探讨了JavaScript中元素的offset与style属性的区别，讲解了client系列的用法，介绍了立即执行函数的作用。此外，还详细阐述了元素滚动的scroll系列，mouseover与mouseenter事件的区别，以及如何封装动画函数，特别是匀速和缓动动画的实现。最后提到了节流阀技术在防止连续触发事件中的应用。

摘要由CSDN通过智能技术生成

元素偏移量offset

offset与style的区别

client系列

立即执行函数

独立创建了一个作用域，不需要调用，立即调用执行

(function(){})();
(function(){}());

第二个小括号中可以看作调用函数。

(function(a,b){
    console.log(a+b);
})(1,2);

元素滚动scroll系列

注意：元素被卷去的头部是element.scrollTop ,如果是页面被卷去的头部则window.pageYOffset。

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发。

动画函数封装

核心原理：通过定时器不断移动盒子

封装动画函数

function animation(obj, target){  //obj动画对象   //目标位置
    
}

匀速动画：盒子当前的位置+固定的值

缓动动画：盒子当前的位置+变化的值（目标位置 - 盒子当前的值）/10

function animate(obj, target){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    var step=(target-obj.offsetLeft)/10;
    step= step>0?  Math.ceil(step): Math.floor(step);
    if(obj,offsetLeft==target)
    {
    clearInterval(obj.timer);
}
    obj.style.left=obj.offsetLeft+step+'px';
},1000)
}

节流阀：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

返回顶部

window.scroll(x, y)