Jquery文字滚动效果

最新推荐文章于 2023-02-28 17:56:48 发布

xyphf_和派孔明

最新推荐文章于 2023-02-28 17:56:48 发布

阅读量747

点赞数

分类专栏：常用特效文章标签： BOM 前端 javascript

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/51676081

版权

常用特效专栏收录该内容

24 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:100px;height:20px;background: red;overflow: hidden;position: relative;}
#div1 ul{width:100px;background: red;position: absolute;top:0;}
#div1 ul li{width:100px;height:20px;background: red;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function(){
	var $aLi = $('#div1 ul li');
	var $oUl= $('#div1 ul');
	var timer = null;
	var num = 0;
	timer = setInterval(next,500)
	function next(){
		$('#div1 ul').delay(2000).animate({'top':$aLi.height()},1000,function(){
			$('#div1 ul li:eq(0)').appendTo($('#div1 ul'))
			$('#div1 ul').css({'top':0})
		});
			// console.log(num);

	}
});
</script>
</head>
<body>
	<div id="div1">
		<ul>
			<li>111111111111</li>
			<li>222222222222</li>
			<li>333333333333</li>
			<li>444444444444</li>
			<li>555555555555</li>
			<li>666666666666</li>
			<li>777777777777</li>
			<li>888888888888</li>
			<li>999999999999</li>
		</ul>
	</div>
</body>
</html>