文字循环向上滚动

最新推荐文章于 2022-04-20 14:56:31 发布

大鼻子oo

最新推荐文章于 2022-04-20 14:56:31 发布

阅读量708

点赞数

分类专栏：效果实现文章标签： JavaScript HTML css

本文链接：https://blog.csdn.net/HhouR0uiQiang/article/details/78526697

版权

效果实现专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.myscroll {
				width: 300px;
				height: 50px;
				margin: 100px auto;
				border: 1px solid #ccc;
				line-height: 26px;
				font-size: 12px;
				overflow: hidden;
			}
			
			.myscroll li {
				height: 26px;
				margin-left: 25px;
			}
			
			.myscroll a {
				color: #333;
				text-decoration: none;
			}
			
			.myscroll a:hover {
				color: #ED5565;
				text-decoration: underline;
			}
		</style>
		<link href="css/mui.min.css" rel="stylesheet" />	
	</head>

	<body>
		<div class="myscroll">
			<ul>
				<li>
					用FlexSlider制作支付宝2013版幻灯片
				</li>
				<li>
					用FlexSlider制作支付宝2013版幻灯片
				</li>
			</ul>
		</div>
		
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/scroll.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			$(function() {
				$('.myscroll').myScroll({
					speed: 40, //数值越大，速度越慢
					rowHeight: 26 //li的高度
				});
			});
		</script>
	</body>

</html>