如何实现文字不间断的向右滚动？

<!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>kxbdMarquee - 模拟Marquee无缝滚动</title>
<meta name="author" content="Aken [email protected]" />
<style type="text/css">
* {margin:0;padding:0;}
body { font-size:12px;}
a {color:#333;}
ul {list-style:none;}
#marquee2 {position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden; background:#EFEFEF;}
#marquee2 ul li {float:left; padding:0 10px; line-height:25px;}
</style>
<script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
(function($){$.fn.kxbdMarquee=function(l){var m=$.extend({},$.fn.kxbdMarquee.defaults,l);return this.each(function(){var b=$(this);var c=b.get(0);var d=b.width();var e=b.height();var f=b.children();var g=f.children();var h=0;var i=(m.direction=='left'||m.direction=='right')?1:0;f.css(i?'width':'height',10000);if(m.isEqual){h=g[i?'outerWidth':'outerHeight']()*g.length}else{g.each(function(){h+=$(this)[i?'outerWidth':'outerHeight']()})}if(h<(i?d:e))return;f.append(g.clone()).css(i?'width':'height',h*2);var j=0;function scrollFunc(){var a=(m.direction=='left'||m.direction=='right')?'scrollLeft':'scrollTop';if(m.loop>0){j+=m.scrollAmount;if(j>h*m.loop){c[a]=0;return clearInterval(k)}}if(m.direction=='left'||m.direction=='up'){c[a]+=m.scrollAmount;if(c[a]>=h){c[a]=0}}else{c[a]-=m.scrollAmount;if(c[a]<=0){c[a]=h}}}var k=setInterval(scrollFunc,m.scrollDelay);b.hover(function(){clearInterval(k)},function(){clearInterval(k);k=setInterval(scrollFunc,m.scrollDelay)})})};$.fn.kxbdMarquee.defaults={isEqual:true,loop:0,direction:'left',scrollAmount:1,scrollDelay:20};$.fn.kxbdMarquee.setDefaults=function(a){$.extend($.fn.kxbdMarquee.defaults,a)}})(jQuery); $(function(){
$('#marquee2').kxbdMarquee({direction:'right',isEqual:false});
});
</script>
</head><body>
<div id="marquee2">
<ul>
<li><a href="#">新闻公告一</a></li>
<li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
<li><a href="#">新闻公告三新闻公告三</a></li>
<li><a href="#">新闻公告四新闻公告四新闻公告四</a></li>
<li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
<li><a href="#">新闻公告六新闻公告六新闻公告六</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">
　
with (top.window.location)
{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}
total_toc_items = 0;
current_overID = "";
last_overID = "";
browser = navigator.appName;
version = parseInt(navigator.appVersion);
client=null;
loaded = 0;
if (browser == "Netscape" && version >= 3) client = "ns3";
function toc_item (img_name,icon_col,width,height) {
if (client =="ns3") {
img_prefix = baseURL + img_name;
this.icon_col = icon_col;
this.toc_img_off = new Image (width,height);
this.toc_img_off.src = img_prefix + "_off.gif";
this.toc_img_on = new Image (width,height);
this.toc_img_on.src = img_prefix + "_on.gif";
}
}
　
function new_toc_item (img_name,icon_row,width,height) {
toc_item [img_name] = new toc_item (img_name,icon_row,width,height);
}
　
function toc_mouseover (itemID) {
if (client =="ns3") {
current_overID = itemID;
if (current_overID != last_overID) {
document [current_overID].src = toc_item [current_overID].toc_img_on.src;
if (last_overID != "") {
document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;
}
last_overID = current_overID;
}
}
}
　
function toc_mouseout () {
if (client =="ns3") {
if (current_overID != "") {
document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;
}
current_overID = "";
last_overID = "";
}
}
new_toc_item ("1",2,120,20);
<!-- Begin
function bannerObject(p){
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage}
　
function clearMessage(){
this.pos = POSITION}
var POSITION = 50;
var DELAY = 150;
var MESSAGE = "这是一个动态JavaScript文字显示的例子";
var scroll = new bannerObject();
function scroller(){
scroll.out += " ";
if(scroll.pos>0)
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }
if (scroll.pos>= 0)
scroll.out += scroll.msg
else
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
document.noticeForm.notice.value = scroll.out
scroll.out = " ";
scroll.pos--;
scroll.pos--;
if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout
('scroller()',scroll.delay);}
</script>
</head>
<body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"
alink="#008080"
text="#C0C0C0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form NAME="noticeForm">
<p><input TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"></p>
</form>
</td>
</tr>
</table>
</body>
</html>
1楼给出的解决方案不错，本人用原生的javascript写了一个，不需要jquery，看看这个：
http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/这个程序可以自己设置水平（左右）、垂直（上下）滚动，设置滚动时间间隔和每次滚动距离，并且兼容多种浏览器用起来也很方便：
<html>
<head>
<title>图片向左滚动</title>
<script type="text/javascript" src="bossma-jscroll.js"></script>
<script type="text/javascript">
window.onload=function(){
//参数依次为：滚动方向，滚动速度，容器ID，容器宽度，容器高度，滚动内容宽度，滚动内容高度，滚动步长
var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
scroll.Start();
};
</script>
</head>
<body>
<div id="title" style="width:100%;height:40px;">图片向左滚动</div>
<div id="content">

<div style="float:left"><img src="images/1.png" /></div>
<div style="float:left"><img src="images/2.png" /></div>
<div style="float:left"><img src="images/3.png" /></div>
</div>
<div id="foot"></div>
</body>
</html>

调试易

如何实现文字不间断的向右滚动？

解决方案 »