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

sz_jack 2010-01-03 12:24:33

如何实现文字不间断的向右滚动，形成一种循环滚动？

...全文

165 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

萤火架构 2011-06-03

打赏
举报

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（比如这里的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>

千游 2010-01-03

打赏
举报

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

hookee 2010-01-03

打赏
举报



<!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 Li@www.kxbd.com" />

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