实现办法:
1、在html代码的head部分
引入animate.js源文件,具体文件可在官网进行下载
引入jQuery.js 文件,编写项目时需要用到
2、用一个空的div标签将需要实现动态效果的标签(div、li、span等等)包裹住
3、利用css选择器的> 标签 用div包裹住 与花样入场效果相冲突的动态效果
4、$(".a1").addClass("animated bounceInLeft show").removeClass("fade");
类元素a1 通过addClass命令增加三个新的类 animated bounceInLeft show 其中
animated是使用animated动态效果的前提
bounceInLeft 是animated样式文件中提供的动态效果的类名
show 是为了展示当前的元素 初始状态是fade隐藏状态的 另外fade 和 show 类 需要自己在样式表中进行添加
通过removeClass命令去除fade样式 将元素显现出来
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/OPPO/css/animate.min.css">
<!-- 选择你animate.css保存的路径 -->
<title>Document</title>
</head>
<body>
<style>
.world_left>div>div{
border-bottom: 3px solid #DFDFDF;
transition: all .3s;
}
.world_left>div:hover>div{
transform: translateY(-10px);
}
.fade{
opacity: 0;
}
.show{
opacity: 1;
}
.world_left{
margin-top: 600px;
width: 800px;
}
.world_left>div{
float: left;
margin: 10px;
}
#world{
height: 2000px;
}
</style>
<div id="world"> <!-- img更改为你想设置的图片 -->
<div class="world_left">
<div class="a1 fade">
<div>
<img src="" >
</div>
</div>
<div class="a2 fade">
<div>
<img src="">
</div>
</div>
<div class="a3 fade">
<div>
<img src="">
</div>
</div>
<div class="a4 fade">
<div>
<img src="">
</div>
</div>
</div>
</div>
<script src="jquery-1.11.3.js"> </script>
<script>
$(window).scroll(function() {
var scrollT = document.documentElement.scrollTop || document.body.scrollTop; //获取当前页面的滚动条纵坐标位置 与 body滑动到的位置做对比
if(scrollT = 500){ //2000为窗口滚到的位置,滚到2000像素的位置时 执行下述指令
$(".a1").addClass("animated bounceInLeft show").removeClass("fade");
$(".a2").addClass("animated bounceInDown show").removeClass("fade");
$(".a3").addClass("animated bounceInUp show").removeClass("fade");
$(".a4").addClass("animated bounceInRight show").removeClass("fade");
}
});
</script>
</body>
</html>