<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style type="text/css">
ul,li{
margin:0;padding:0
}
#scrollDiv{
overflow:auto
}
.scrollText{
width:300px;
height:100px;
min-height:25px;
line-height:25px;
border:#ccc 1px solid;
float:left;
overflow:hidden
}
.scrollText li{
height:25px;
padding-left:10px;
}
</style>
<body>
<div id="scrollDiv">
<div class="scrollText">
<ul style="margin-top: 0px; ">
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
<li>这是公告标题的九行</li>
<li>这是公告标题的第十行</li>
<li>这是公告标题的第十一行</li>
<li>这是公告标题的第十二行</li>
</ul>
</div>
</div>
<p>配置参数:line:滚动几行;speed:滚动速度;timer:自动滚动间隔</p>
</body>
</html>
<script>
$(document).ready(function(){
$("#scrollDiv").textSlider({line:1,speed:500,timer:3000});
});
(function($){
$.fn.textSlider = function(settings){
settings = jQuery.extend({
speed : "normal",
line : 2,
timer : 1000
}, settings);
return this.each(function() {
$.fn.textSlider.scllor( $( this ), settings );
});
};
$.fn.textSlider.scllor = function($this, settings){
var ul = $( "ul:eq(0)", $this );
var timerID;
var li = ul.children();
var liHight=$(li[0]).height();
var upHeight=0-settings.line*liHight;//滚动的高度;
var scrollUp=function(){
ul.animate({marginTop:upHeight},settings.speed,function(){
for(i=0;i<settings.line;i++){
ul.find("li:first").appendTo(ul);
}
ul.css({marginTop:0});
});
};
var autoPlay=function(){
timerID = window.setInterval(scrollUp,settings.timer);
};
var autoStop = function(){
window.clearInterval(timerID);
};
//事件绑定
ul.hover(autoStop,autoPlay).mouseout();
};
})(jQuery);
</script>
配置参数:line:滚动几行;speed:滚动速度;timer:自动滚动间隔