js+css淡入效果

最新推荐文章于 2024-05-22 19:36:03 发布

裸禄棍交比火牛

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量119

点赞数 1

分类专栏： js 文章标签： js css

本文链接：https://blog.csdn.net/weixin_44220805/article/details/105530148

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面滚动到相应位置运行css3动画</title>
<script src="js\jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
    var a,b,c;
    //获取.con当前高度
    a=$(".con").outerHeight();
    
	$(window).scroll(function(){
        //滚动长度		
        var b=$(this).scrollTop();
        
        //遍历div
		$(".box div").each(function(){
            //获取div到顶部的距离
            c=$(this).offset().top;	
            						
			if(a+b>c){
				$(this).addClass("move");
			}
			else{
				$(this).removeClass("move");
			}
		});	
	});
  	
});
</script>

<style>

.con{ height:1200px;background-color: aqua;}
.box{ list-style:none; padding:0; margin:0; border-top:2px solid blue;}

.box .move { animation:move 1s;}
@keyframes move{
	from{ opacity:0; margin-left:500px;}
	to{ opacity:1; margin-left:0;}
}
</style>
</head>
 
<body>

<div class="con"></div>
<div class="box">	
    <div><img src="images\page-portfolio-item-1\slide-1.jpg"/></div>
    <div><img src="images\page-portfolio-item-1\slide-1.jpg"/></div>
    <div><img src="images\page-portfolio-item-1\slide-1.jpg"/></div>
</div>


</body>
</html>

裸禄棍交比火牛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+css淡入效果

<!doctype html><html><head><meta charset="utf-8"><title>页面滚动到相应位置运行css3动画</title><script src="js\jquery-1.9.1.min.js"></script><script>$(do...
复制链接

扫一扫