单行文字滚动效果,jquery手写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单行文字滚动效果,jquery手写</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>
<style>
ul ,li{ margin:0px; padding:0px; list-style:none;}
.roll-box{ background:# #FF0000; height:35px; overflow:hidden;}
.roll-box li { line-height:35px; height:35px;}
</style>

</head>

<body>

<div class="roll-box" id="roll-box">
<ul >
    <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开!看你有没被坑蒙在鼓里~</a></li>
    <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花,超简单的</a></li>
    <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐!好吃又减肥!</a></li>
</ul>
</div>

<script>
function autoNotice(obj) {

	$(obj).find("ul:first").animate({
		marginTop: "-35px"
	},
	500,
	function() {
		$(this).css({
			marginTop: "0px"
		}).find("li:first").appendTo(this);
	});
}

var myar = setInterval('autoNotice("#roll-box")', 2500);

</script>

</body>
</html>

——————————————————-

小修改:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>单行文字滚动效果,jquery手写</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>
<style>
ul ,li{ margin:0px; padding:0px; list-style:none;}
.roll-box{ background:# #FF0000; xheight:35px; overflow:hidden; width:200px;}
.roll-box li { line-height:35px; xheight:35px;}
</style>

</head>
<body>

<div class="roll-box" id="roll-box">
<ul >
    <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开!看你有没被坑蒙在鼓里~</a></li>
    <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花,超简单的</a></li>
    <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐!好吃又减肥!</a></li>
</ul>
</div>

<script>
function autoNotice(obj) {
	
	var h = $(obj).find("ul:first li:first").height();
	console.log();
	$(obj).find("ul:first").animate({
		marginTop: -h+"px"
	},
	500,
	function() {
		$(this).css({
			marginTop: "0px"
		}).find("li:first").appendTo(this);
	});
}

var myar = setInterval('autoNotice("#roll-box")', 2500);

</script>

</body>
</html>

发表评论

邮箱地址不会被公开。 必填项已用*标注