<!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="http://221.130.163.175/publish/www/resource/res/js/jquery.min.js"></script>
<style>
/* 多行滚动 */
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
#scrollDiv2{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv2 li{height:25px;padding-left:10px;}
</style>
<script type="text/javascript">
// 多行滚动
(function($){
$.fn.extend({
Scroll:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
(function($){
$.fn.extend({
Scroll2:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp2=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp2()",timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:1,speed:1000,timer:3000});
$("#scrollDiv2").Scroll2({line:1,speed:1000,timer:3000});
});
</script>
</head>
<body>
<!-- 多行滚动 -->
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
<br/>
<div id="scrollDiv2">
<ul>
<li>这是公告标题2的第一行</li>
<li>这是公告标题2的第二行</li>
<li>这是公告标题2的第三行</li>
<li>这是公告标题2的第四行</li>
<li>这是公告标题2的第五行</li>
<li>这是公告标题2的第六行</li>
<li>这是公告标题2的第七行</li>
<li>这是公告标题2的第八行</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
基于DIV的JS滚动条控制文字滚动特效，拖动滚动条，文字区域可上下滚动，滚动条也是自定义的，不是默认风格的滚动条，本滚动条不但兼容IE浏览器，还可正常运行于火狐和Chrome等浏览器中。
js文字滚动特效，到头尾停止，基于jquery4.1以上
js 特效 html 特效 文字滚动显示 js 特效 html 特效 文字滚动显示
一款简单的js+css3文字上下滚动切换动画特效，可设置多种不同颜色的文字。
js文字滚动插件制作一个js文字滚动效果，两排双行关联向上文字间隙滚动,支持多组文字滚动列表。内含js代码下载。
图片，文字滚动特效JS汇总。各种图片和文字滚动效果，做网站的应该要用到。
原生js间歇文字滚动新浪微博评论文字向下滚动效果
网页文字滚动的10种效果js实现，这里提供了10种效果，你喜欢哪一种，多种文字效果选择。完整的html页面，点开即能呈现效果，方法易复用。
js标签云球形滚动文字特效代码，适合博客、网站标签汇总使用！
js无缝滚动制作js文字无缝滚动和js图片无缝滚动 js文字切换特效制作焦点文字带滤镜切换效果 js文字特效制作js文字闪烁与文字变色效果
类似抽奖公告.文字滚动一次一行特效,html,js css源码都 在这里.代码简洁容易修改
js 特效 html 特效 很酷的文字滚动显示 js 特效 html 特效 很酷的文字滚动显示
很酷的文字滚动显示.rar很酷的文字滚动显示.rar很酷的文字滚动显示.rar很酷的文字滚动显示.rar很酷的文字滚动显示.rar很酷的文字滚动显示.rar
js文字图片滚动特效，包括文字上下滚动、左右滚动、停顿滚动；图片上下滚动、左右滚动、停顿滚动。
js单行文字滚动公告 方便快捷实用 可做网站公告
简单、实用的javascript文字横向滚动效果。
s无缝滚动制作多种无缝滚动效果js文字无缝滚动和js图片无缝滚动,直接复制副本标签js无缝滚动代码。内含js代码下载。
js 特效 html 特效 文字链接的滚动说明 js 特效 html 特效 文字链接的滚动说明
这是我的图片、文字横竖无缝隙同时滚动代码，（我还有消息提示、通用js所以滚动大全、模式对话框、各种js特效），希望可以帮助大家.注：此资源针对需要特效人员。