这篇博客介绍了一种方法，通过JavaScript监听窗口滚动事件，结合CSS3动画，实现在用户滚动到特定界面时触发动画效果。文章详细讲解了如何获取元素位置，判断滚动距离，并动态添加和移除动画类，以实现动画的触发和停止。
一、思路：
1.用css3写好一个动画效果，并将这个动画封装到一个类中；
2.利用js获取到指定界面距离顶部的距离，当此距离小于一定值时给需要添加动画的元素添加这个类名即可触发动画，并且修改元素已有样式
知识点：addEventListener() 方法用于向指定元素添加事件句柄。
语法：element.addEventListener(event, function, useCapture)
Js代码：
<script>
function getTop(clsName) { //获取界面距离顶部的距离
var obj=document.getElementsByClassName(clsName)[0];
return obj.getBoundingClientRect().top;
}
function getDom(clsName) { //获取需添加动画的元素
var obj=document.getElementsByClassName(clsName)[0];
return obj;
}
window.addEventListener('scroll',function(){
//添加类名
var scrollT=document.documentElement.srollTop||document.body.scrollTop;
//获取距离
if(getTop('down')<300){
getDom('p').classList.add('move');
getDom('p').style.display='block';
}
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en"
最低0.47元/天 解锁文章
扫一扫
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
