一、思路：
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元/天 解锁文章
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
