css3+jQuery实现列表依次滑入效果

最新推荐文章于 2024-04-02 13:33:28 发布

伍什kay

最新推荐文章于 2024-04-02 13:33:28 发布

阅读量607

点赞数

分类专栏：手写及实现文章标签： css3 jQuery js HTML

本文链接：https://blog.csdn.net/qq_39085895/article/details/86526911

版权

手写及实现专栏收录该内容

9 篇文章 0 订阅

订阅专栏

平台需要一个消息提示的列表，原来是弹框形式的，显得太死板老套，网上找了几个都不是想要的那种，果断就手动扣了一个，很简单代码不多也就几十行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{list-style-type: none;}
			body{background-color: #f4f4f4;margin:0;left: 0;top: 0;}
			#main_news_list{width:200px;position: fixed;bottom:30px;right: 30px;z-index: 99;}
			#main_news_list li{
				overflow:hidden;
				padding:10px;
				width:200px;
				height:60px;
				opacity: 0;
				margin-bottom:10px;
				border-radius: 5px;
				background-color: #ffffff;
				position: relative;
			    border: 1px solid #ebeef5;
			    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			}
			#main_news_list li b{float:right;cursor: pointer;}
			.main_news_active{animation:action 1s;opacity: 1 !important;}
			.main_news_heightActive{animation:heightChange 0.5s;}
			@keyframes action{
				0%{transform: translateX(240px);opacity: 0;}
				100%{ transform: translateX(0px);opacity: 1;margin-right:auto;}
			}
			@keyframes heightChange{
				0%{height:60px;opacity: 1;padding:10px;margin-bottom:10px;}
				100%{height:0px;opacity: 0;padding:0px;margin-bottom:0px;}
			}
		</style>
	</head>
	<body>
		<ul id="main_news_list">
			<li>列表依次进入1<b>X</b></li>
			<li>列表依次进入2<b>X</b></li>
			<li>列表依次进入3<b>X</b></li>
			<li>列表依次进入4<b>X</b></li>
			<li>列表依次进入5<b>X</b></li>
			<li>列表依次进入6<b>X</b></li>
			<li>列表依次进入7<b>X</b></li>
		</ul>
	</body>
	<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var mainNewsList = $("#main_news_list li");
			var deleteArr = $("#main_news_list b");
			var bottomPx = 30;
			$.each(mainNewsList, function(i,ele) {
				var that = $(this);
				setTimeout(function(){ 
					that.addClass('main_news_active');
				},150*i);
			}); 
			$.each(deleteArr, function(i,ele) {
				$(this).click(function(){
					bottomPx += 90;
					$("#main_news_list").animate({bottom:bottomPx+"px"});
					var mainNewsListOli = $(this).parents("li");
					mainNewsListOli.addClass('main_news_heightActive');
					setTimeout(function(){ 
						mainNewsListOli.remove();
					},500);
				});
			});
		});
	</script>
</html>

很久之前我就发现css3动画很让人着迷，事实却是如此，以后还得多加练习，我要变得更强！

伍什kay

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3+jQuery实现列表依次滑入效果

平台需要一个消息提示的列表，原来是弹框形式的，显得太死板老套，网上找了几个都不是想要的那种，果断就手动扣了一个，很简单代码不多也就几十行。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style ty
复制链接

扫一扫

专栏目录