<!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>