文字向左连续滚动代码

请教各位js高手，由于自己对js不是很了解，现在需要制作一个效果，使一段文字能够向左循环滚动
目前使用了一段代码如下;
<marquee direction=left align="bottom" height="100%" width="100%" onmouseout=this.start() 
onmouseover=this.stop() scrollamount="1" scrolldelay="0">
 <a href="baidu.com">123456</a>
</marquee>但是做美工的说不行，说这样滚动不好看，两次滚动之间会留有空白，需要的效果是当第一次滚动还没有完全消失的时候，第二次滚动就已经开始了，在网上也找了许多的代码，但是都不成功。
比如说下面的代码：<div id="marquees"> <!-- 这些是字幕的内容，你可以任意定义 -->  
<a href="#">链接四</a> 
<!-- 字幕内容结束 --> 
</div> 
<!-- 以下是java-script代码 --> 
<script language="javascript"> 
<!-- 
marqueesWidth=120; //内容区宽度度 
stopscroll=false; //这个变量控制是否停止滚动 
with(marquees){ 
noWrap=true; //这句表内容区不自动换行 
style.width=marqueesWidth; //于是我们可以将它的宽度设为0，因为它会被撑大 
style.height=0; style.overflowX="hidden"; //滚动条不可见 
onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动 
onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动 
} 
//这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面： 
document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>'); function init(){ //初始化滚动内容 
while(templayer.offsetWidth<marqueesWidth){ 
templayer.innerHTML+=marquees.innerHTML; 
} //把"templayer"的内容的“两倍”复制回原内容区： 
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML; 
//设置连续超时，调用"scrollUp()"函数驱动滚动条： 
setInterval("scrollUp()",20); 
} 
document.body.onload=init; 
preTop=0; //这个变量用于判断滚动条是否已经到了尽头 
function scrollUp(){ //滚动条的驱动函数 
if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动 
preTop=marquees.scrollLeft; 
marquees.scrollLeft+=1; 
//如果滚动条不动了，则向上滚动到和当前画面一样的位置 
//当然不仅如此，同样还要向下滚动一个像素(+1)： 
if(preTop==marquees.scrollLeft){ 
marquees.scrollLeft=templayer.offsetHeight-marqueesWidth+1; 
} 
} 
--> 
</script> 但是只要网页加入这句话
<!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">
效果就没有了，恳请各位帮忙解决，谢谢！

解决方案 »

  1.   

    xhtml1-transitional.dtd 下 width需要单位
      

  2.   

    参考图片滚动，其实就是将一份复制两份用
    http://blog.csdn.net/lihan6415151528/archive/2009/03/19/4003830.aspx
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>run!</title>
    <style type="text/css">
    #ss{width:130px;height:20px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
    #ss ul{margin:0px; padding:0px;width:650px;}
    #ss ul li{margin:0px; padding:0px; list-style:none; float:left;display:block; width:130px;}
    </style>
    </head>
    <body>
    <div id='ss'>
    <ul>
    <li>111111111111111</li>
    <li>222222222222222</li>
    <li>333333333333333</li>
    <li>444444444444444</li>
    <li>111111111111111</li>
    </ul>
    </div>
    <script>
    var speed =10;
    function $(id){return document.getElementById(id)};
    function $$(obj,elm){return obj.getElementsByTagName(elm)}
    setInterval(function(){$('ss').scrollLeft<$$($('ss'),'ul')[0].offsetWidth-$$($('ss'),'li')[0].offsetWidth?($('ss').scrollLeft++):($('ss').scrollLeft=0)},speed)
    </script>试试这个！~
      

  4.   


    <!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"> 
    <body>
    <div id="marquees"> <!-- 这些是字幕的内容，你可以任意定义 -->  
    <a href="#">链接四</a> 
    <!-- 字幕内容结束 --> 
    </div> 
    <!-- 以下是java-script代码 --> 
    <script language="javascript"> 
    <!-- 
    marqueesWidth=120; //内容区宽度度 
    stopscroll=false; //这个变量控制是否停止滚动 
    with(marquees){ 
    noWrap=true; //这句表内容区不自动换行 
    style.width=marqueesWidth; //于是我们可以将它的宽度设为0，因为它会被撑大 
    style.height='auto'; style.overflowX="hidden"; //滚动条不可见 
    onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动 
    onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动 
    } 
    //这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面： 
    document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>'); function init(){ //初始化滚动内容 
    while(templayer.offsetWidth<marqueesWidth){ 
    templayer.innerHTML+=marquees.innerHTML; 
    } //把"templayer"的内容的“两倍”复制回原内容区： 
    marquees.innerHTML=templayer.innerHTML+templayer.innerHTML; 
    //设置连续超时，调用"scrollUp()"函数驱动滚动条： 
    setInterval("scrollUp()",20); 
    } 
    document.body.onload=init; 
    preTop=0; //这个变量用于判断滚动条是否已经到了尽头 
    function scrollUp(){ //滚动条的驱动函数 
    if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动 
    preTop=marquees.scrollLeft; 
    marquees.scrollLeft+=1; 
    //如果滚动条不动了，则向上滚动到和当前画面一样的位置 
    //当然不仅如此，同样还要向下滚动一个像素(+1)： 
    if(preTop==marquees.scrollLeft){ 
    marquees.scrollLeft=templayer.offsetHeight-marqueesWidth+1; 
    } 
    } 
    --> 
    </script> 
    </body>
    </html>
    我只改动了style.height=0  改成了 style.height='auto'; 其实按道理来说style.width=marqueesWidth 也要改一下 style.width=marqueesWidth+"px"
      

  5.   

    http://www.scriptlover.com/controls/ 里面就有
      

  6.   

    用fxmarquee - jQuery内容滚动插件不行吗？
    上下左右都支持，我稍微改了好fxmarquee中的代码就可以实现上下左右无缝滚动了
    如下：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0040)http://feiyu.asgard.cn/jquery/fxmarquee/ -->
    <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>fxMarquee - jQuery内容滚动插件</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK 
    href="fxMarquee - jQuery内容滚动插件.files/default.css" type=text/css rel=stylesheet>
    <SCRIPT src="fxMarquee - jQuery内容滚动插件.files/jquery.js" type=text/javascript></SCRIPT>
    <SCRIPT src="fxMarquee - jQuery内容滚动插件.files/jquery.chili.js" type=text/javascript></SCRIPT>
    <SCRIPT src="fxMarquee - jQuery内容滚动插件.files/jquery.feiyu51la.js" type=text/javascript></SCRIPT>
    <SCRIPT src="fxMarquee - jQuery内容滚动插件.files/global.js" type=text/javascript></SCRIPT>
    <SCRIPT src="fxMarquee - jQuery内容滚动插件.files/jquery.fxMarquee.pack.js" type=text/javascript></SCRIPT><SCRIPT type=text/javascript>
    $(function() {
    $(".demo1").fxMarquee({speed:10, direction:'left'});
    });</SCRIPT><STYLE type=text/css>
    .demo1 {
    OVERFLOW: hidden;POSITION: relative; width:300px; HEIGHT: 134px
    }
    .demo1 UL {
    POSITION: absolute ; ZOOM: 1;float:left; 
    } 
    .demo1 LI {
    FLOAT: left; list-style:none; WIDTH: 300px; 
    }
     
    </STYLE><META content="MSHTML 6.00.2900.5848" name=GENERATOR></HEAD>
    <BODY>
    <DIV id=hd>
    <H1>fxMarquee</H1></DIV>
    <DIV id=bd>
      
    <P>演示一</P> 
    <DIV class=demo1>
    <!-- 上下滚动时，设置UL的width为100% -->
    <!-- <UL style=" WIDTH:100%; "> -->
    <!-- 左右滚动时，设置UL的width为LI的两倍以上，比如2000px -->
    <UL style=" WIDTH:2000px; ">
    <li>
    中俄军演举行实兵实弹演练 <br>
    天文爱好者乘飞机追拍日全食 <br>
    首轮中美战略与经济对话议程公布 <br>
    黑龙江鸡西煤矿发生水灾23人被困 <br>
    印尼爆炸嫌犯过安检录像 <br>
    各地日全食精华瞬间回放 <br>
    </li>
    </UL>
    </DIV> 
    </BODY>
    </HTML>
      

  7.   

    这个不错，不过能不能不用ul li 就一段文字不更好？
      

  8.   

    <!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=gb2312" />
    <title>向左滚动的文字特效JS代码</title>
    </head>
    <body>
    <p>style="overflow:hidden;height:24px; line-height:24px;width:600px; border:1px solid #666; white-space:nowrap;" 这一段，向左滚动的文字特效需要这一段样式的配合，在这里宽、高、和white-space:nowrap （强制不换行）是必须的。</p>
    <div id="demo" style="overflow:hidden;height:24px; line-height:24px;width:600px; border:1px solid #666; white-space:nowrap;">
      <div id="demo1"> <a href="http://www.seo371.cn" title="网站建设|网站优化|专业网站设计">懒人建站</a> http://www.seo371.cn 网站建设|网站优化|专业网站设计 向左滚动的文字特效JS代码,这个向左滚动的文字特效JS代码比较简洁，代码量很少，你可以扩展一下你完全可以在这里定义图片或者图文结合等等形式，这是一个容器。</div>
      <div id="demo2"></div>
    </div>
    <script style="text/javascript">
    var speed=40;//数值越大，速度越慢
    var demo2=document.getElementById("demo2");
    var demo1=document.getElementById("demo1");
    var demo=document.getElementById("demo");
    function MarqueeLeft(){
    if(demo2.offsetWidth-demo.scrollLeft<=0)
    demo.scrollLeft-=demo1.offsetWidth
    else{
    demo.scrollLeft++
    }
    }
    var MyMar=setInterval(MarqueeLeft,speed);
    demo.onmouseover=function() {clearInterval(MyMar);}
    demo.onmouseout=function() {MyMar=setInterval(MarqueeLeft,speed);}
    </script>
    </body>
    </html>