单行滚动
<!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>单行滚动</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="news" style="background-color: pink;height: 2.8rem;overflow:hidden;line-height: 45px;">
<ul style="margin-top:0!important">
<li>
<a href="#">1我是第一条</a>
</li>
<li>
<a href="#">2我是第二条</a>
</li>
<li>
<a href="#">3我是第三条</a>
</li>
<li>
<a href="#">4我是第一条</a>
</li>
<li>
<a href="#">5我是第四条</a>
</li>
<li>
<a href="#">6我是第五条</a>
</li>
</ul>
</div>
<script language="javascript">
function autoScroll(obj){
$(obj).find('ul').animate({
marginTop: '-2.8rem'
},1000,function(){
$(this).css({marginTop : "0px"});
var li =$("ul").children().first().clone()
$("ul li:last").after(li );
$("ul li:first").remove();
})
}
$(function(){
setInterval('autoScroll("#news")',2000);
console.log(666);
})
</script>
</body>
</html>
多行滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝多行向上滚动</title>
<style>
*{margin:0;padding:0;font-size:12px;list-style: none;}
.box{margin:20px;
width:320px;
height:195px;
border:1px solid #ddd;
padding:10px;
overflow:hidden;
box-sizing: border-box;
}
.boxul{
padding: 10px;
}
.box ul li{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height:25px;
}
</style>
<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<ul>
<li>01、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>02、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>03、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>04、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>05、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>06、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>07、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>08、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>09、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
<li>10、这是一个文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</li>
</ul>
</div>
<script>
(function($) {
$.fn.scrollTop = function(options) {
var defaults = {
speed: 30
}
var opts = $.extend(defaults, options);
this.each(function() {
var $timer;
var scroll_top = 0;
var obj = $(this);
var $height = obj.find("ul").height();
obj.find("ul").clone().appendTo(obj);
obj.hover(function() {
clearInterval($timer);
}, function() {
$timer = setInterval(function() {
scroll_top++;
if (scroll_top > $height) {
scroll_top = 0;
}
obj.find("ul").first().css("margin-top", -scroll_top);
}, opts.speed);
}).trigger("mouseleave");
})
}
})(jQuery)
</script>
<script>
$(function() {
$(".box").scrollTop({
speed: 30 //数值越大 速度越慢
});
})
</script>
</body>
</html>