如何实现这样的文字滚动效果

<!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>JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)</title>
</head>
<body>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};
var Scroller = Class.create();
Scroller.prototype = {
  initialize: function(idScroller, idScrollMid, options) {
    var oThis = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
    
    this.SetOptions(options);
    this.Side = this.options.Side || ["up"];//方向
    this.scroller = oScroller;            //对象
    this.speed = this.options.Speed;    //速度
    this.timer = null;                    //时间
    this.pauseHeight = 0;                //定高
    this.pauseWidth = 0;                //定宽
    this.pause = 0;                        //定高(宽)
    this.side = 0;                        //参数
    
    //用于上下滚动
    this.heightScroller = parseInt(oScroller.style.height) || oScroller.offsetHeight;
    this.heightList = oScrollMid.offsetHeight;
    
    //用于左右滚动
    this.widthScroller = parseInt(oScroller.style.width) || oScroller.offsetWidth;
    this.widthList = oScrollMid.offsetWidth;
    
    //js取不到css设置的height和width
    
    oScroller.style.overflow = "hidden";
    oScrollMid.appendChild(oScrollMid.cloneNode(true));
    oScrollMid.appendChild(oScrollMid.cloneNode(true));
    
    addEventHandler(oScroller, "mouseover", function() { oThis.Stop(); });
    addEventHandler(oScroller, "mouseout", function() { oThis.Start(); });
    
    this.Start();
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
      Step:            1,//每次变化的px量
      Speed:        20,//速度(越大越慢)
      Side:            ["up"],//滚动方向:"up"是上，"down"是下，"left"是左，"right"是右
      PauseHeight:    0,//隔多高停一次
      PauseWidth:    0,//隔多宽停一次
      //当上下和左右一起使用时必须设置PauseHeight和PauseWidth来设置转向位置
      PauseStep:    1000//停顿时间(PauseHeight或PauseWidth大于0该参数才有效)
    };
    Object.extend(this.options, options || {});
  }, 
  //转向
  Turn: function() {
    //通过设置方向数组的排列来转向
    this.Side.push(this.Side.shift().toLowerCase());
  },
  //上下滚动
  ScrollUpDown: function() {
    this.pause = this.pauseHeight;
    this.scroller.scrollTop = this.GetScroll(this.scroller.scrollTop, this.heightScroller, this.heightList, this.options.PauseHeight);
    this.pauseHeight = this.pause;
    
    var oThis = this;
    this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);
  },
  //左右滚动
  ScrollLeftRight: function() {
    this.pause = this.pauseWidth;
    //注意:scrollLeft超过1400会自动变回1400 注意长度
    this.scroller.scrollLeft = this.GetScroll(this.scroller.scrollLeft, this.widthScroller, this.widthList, this.options.PauseWidth);
    this.pauseWidth = this.pause;
    
    var oThis = this;
    this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);
  },
  //获取设置滚动数据
  GetScroll: function(iScroll, iScroller, iList, iPause) {
    var iStep = this.options.Step * this.side;
    
    if(this.side > 0){
        if(iScroll >= (iList * 2 - iScroller)){ iScroll -= iList; }
    } else {
        if(iScroll <= 0){ iScroll += iList; }
    }
    
    this.speed = this.options.Speed;
    if(iPause > 0){
        if(Math.abs(this.pause) >= iPause){
            this.speed = this.options.PauseStep; this.pause = iStep = 0; this.Turn();
        } else {
            this.pause += iStep;
        }
    }
    
    return (iScroll + iStep);
  },
  //开始
  Start: function() {    
    //方向设置
    switch (this.Side[0].toLowerCase()) {
        case "right" :
            if(this.widthList < this.widthScroller) return;
            this.side = -1;
            this.ScrollLeftRight();
            break;
        case "left" :
            if(this.widthList < this.widthScroller) return;
            this.side = 1;
            this.ScrollLeftRight();
            break;
        case "down" :
            if(this.heightList < this.heightScroller) return;
            this.side = -1;
            this.ScrollUpDown();
            break;
        case "up" :
        default :
            if(this.heightList < this.heightScroller) return;
            this.side = 1;
            this.ScrollUpDown();
    }
  },
  //停止
  Stop: function() {
    clearTimeout(this.timer);
  }
};window.onload = function(){
    new Scroller("idScroller", "idScrollMid",{ Side:["up","left"], PauseHeight:50, PauseWidth:400 });
}
</script>
<style>
.Scroller {}{line-height:50px; border:1px solid #000000; padding:0px 10px; height:50px; width:400px;}
.Scroller *{}{margin:0px; padding:0px;}
.ScrollMid {}{float:left;}
.ScrollMid ul{}{width:800px;float:left;}
.ScrollMid li{}{list-style:none; float:left; width:390px; padding-left:10px;}
</style>
<div id="idScroller" class="Scroller" style="width:400px; height:50px;">
  <div style="width:1600px">
    <div id="idScrollMid" class="ScrollMid">
      <ul>
        <li>111111111111</li>
        <li>2222222222222</li>
        <li>333333333333333</li>
        <li>4444444444444</li>
      </ul>
    </div>
  </div>
</div>
<div id="test"></div>
</body>
</html>这个上下的 给你点思路

解决方案 »

  1.   

    <marquee scrolldelay=50 behavior=alternate scrollAmount=1 width=500>信息一  信息二  信息三  信息四  信息五 </marquee>
      

  2.   

    这是向左和向右，不过向右的写的不好，最好楼主看了改了再贴上来，还有这代码好像firefox没反应left
    <div id="marquees">
    <a>信息一</a>
    <a>信息二</a>
    <a>信息三</a>
    <a>信息四</a>
    <a>信息五</a>
    </div><script language="javascript">    function $(id){
            return document.getElementById(id);
        }
        
        var marquees = $("marquees");
        function init(){        previousScrollLeft=null; 
            stopScroll=false; 
            marqueesOffsetWidth=200; 
            marqueesScrollWidth = marquees.scrollWidth;
            with(marquees){
                noWrap=true; 
                style.width=marqueesOffsetWidth; 
                style.height=0;
                style.overflowX="hidden";
                style.overflowY="hidden";
                onmouseover=new Function("stopScroll=true");
                onmouseout=new Function("stopScroll=false");
            }
            marquees.innerHTML+=marquees.innerHTML;
            setInterval("scrollLeft()",20);
        }    document.body.onload=init;    function scrollLeft(){ 
            if(stopScroll==true){
                return;
            }
            previousScrollLeft=marquees.scrollLeft; 
            marquees.scrollLeft+=1;
            if(previousScrollLeft==marquees.scrollLeft){
                    marquees.scrollLeft=marqueesScrollWidth - marqueesOffsetWidth + 1;
            }
        }  
        
    </script>
    right
    <div id="marquees">
    <a>信息一</a>
    <a>信息二</a>
    <a>信息三</a>
    <a>信息四</a>
    <a>信息五</a>
    </div><script language="JavaScript">
        function $(id){
            return document.getElementById(id);
        }
        
        var marquees = $("marquees");
        function init(){        previousScrollLeft=null; 
            stopScroll=false; 
            marqueesOffsetWidth=200; 
            marqueesScrollWidth = marquees.scrollWidth;
            with(marquees){
                noWrap=true; 
                style.width=marqueesOffsetWidth; 
                style.height=0;
                style.overflowX="hidden";
                style.overflowY="hidden";
                onmouseover=new Function("stopScroll=true");
                onmouseout=new Function("stopScroll=false");
            }
            marquees.innerHTML+=marquees.innerHTML;
            setInterval("scrollLeft()",20);
        }    document.body.onload=init;    function scrollLeft(){ 
            if(stopScroll==true){
                return;
            }
            previousScrollLeft=marquees.scrollLeft; 
            marquees.scrollLeft-=1;
            if(previousScrollLeft==marquees.scrollLeft){
                    marquees.scrollLeft=marqueesScrollWidth - marqueesOffsetWidth + 1;
            }
        } 
    </script>
      

  3.   

    有几位朋友的效果不是我说的往左边滚动一条，停顿一下，再继续往左边滚动第二条……，如此循环
    wl__0464这位朋友贴出的代码比较接近，但由于本人对javascript不熟，能否有人帮改一下
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>css+js控制文字滚动 </title> 
    <style> 
    body{ 
      padding: 0px; 
      margin: 0px; 
      font: 70% verdana, geneva, arial, helvetica, sans-serif; 
      color: #000; 
      text-align: center 
      } 
    #outer{ 
      padding: 0px; 
      margin: 0px; 
      width: 400px; 
      text-align: center 
      } 
    #focus{ 
      border: #ccc 2px solid; 
      margin: 0px; 
      padding: 0px; 
      padding-top: 15px; 
      background: url(/images/tile.gif) #eee repeat-y left top; 
      width:394px; 
      position: relative; 
      height: 80px 
      } 
    #description{ 
      height:80px; 
      overflow:hidden; 
      margin-right:0px; 
      float:left; 
      } 
    .dis{ 
      float:left; 
      width:10px; 
      text-align: center; 
      padding-top:10px 
    } 
    #description ul, #description li { 
      float:left; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    height:80px 
    } 
    .content a:active, 
    .content a:visited, 
    .content a:link { 
    display: inline; 
    text-decoration: none; 
    } .content a:hover { 
      color: #ffffff; 
      display: inline; 
      text-decoration: none; 
    } 
    img {border:0px} 
    </STYLE> 
    </head> 
    <body> 
    <div id=outer> 
        <div id=focus> 
           <div class="dis"> 
               <img id="img_l" src="http://www.1netmedia.net/base/attachments/month_200708/btn_left.jpg" alt="向左滚动" onClick="doSlide(-1)" /> 
           </div> 
           <div id=description class=description> 
             <div id="content0"> 
             <ul id="content"  class=content>         
               <li style="width:75px; margin:0px;"> <a href="#">chinmo测试1</a> </li> 
       <li style="width:75px;margin:0px;"> <a href="#">chinmo测试2</a> </li> 
       <li style="width:75px;margin:0px;"> <a href="#">chinmo测试3</a> </li> 
       <li style="width:75px;margin:0px;"> <a href="#">chinmo测试4</a> </li> 
       <li style="width:75px;margin:0px;"> <a href="#">chinmo测试5 </a></li> 
       <li style="width:75px;margin:0px;"> <a href="#">chinmo测试6 </a></li> 
       <li style="width:75px;margin:0px;"> <a href="#">chinmo测试7 </a></li>
       <li style="width:75px;margin:0px;"> <a href="#">chinmo测试8 </a></li>
             </ul> 
             </div> 
           </div> 
           <div class="dis"> 
               <img id="img_r" src="http://www.1netmedia.net/base/attachments/month_200708/btn_right.gif" alt="向右滚动" onClick="doSlide(1)" /> 
           </div> 
         </div> 
    </div> 
    <script> 
    var img_pad=5//图片间隔 
    var img_w=75//图片宽 
    var img_n=4//每窗图片数 
    document.write (" <style>.content a {padding: 0 "+ img_pad+" 0 "+ img_pad+";} </style>") 
    var win_w=img_w*img_n+(img_pad*4)*(img_n-1)-5 
    document.getElementById("description").style.width=win_w 
    document.getElementById("content0").innerHTML+=document.getElementById("content0").innerHTML 
    var ok_obj=document.getElementById("content0").getElementsByTagName("LI") 
    var ok=Math.ceil(ok_obj.length/4)-1; 
    document.getElementById("content0").style.width=(ok+1)*win_w 
      var ele=document.getElementById("description"); 
      var w=ele.clientWidth; 
      var n=20,t=50; 
      var timers=new Array(n); 
      var k=0;doSlide(0); 
       
    var ss=1,t2 
    function doSlide(s){ 
    clearTimeout(t2); 
    ss=s; 
      if (k>=ok &&s>0){ele.scrollLeft=w;k=1;}//alert(ele.scrollLeft); 
      if (k <1 &&s <0){ele.scrollLeft=(ok-1)*w;k=ok-1} 
      k+=s; 
        var x=ele.scrollLeft 
        var d=k*w-x; 
        for(var i=0;i <n;i++)( 
          function(){ 
            if(timers[i]) clearTimeout(timers[i]); 
            var j=i; 
    //        alert(x) 
            timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t); 
          } 
        )(); t2=setTimeout ("auto_scroll()",3000) 
    } 
    function auto_scroll(){ 
    doSlide(ss) 
    //var t2=setTimeout ("auto_scroll()",3600) 
    } 
    setTimeout ("auto_scroll()",2000) 
    </script> 
    </body> 
    </html> 
    看下这个吧
      

  5.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>css+js控制文字滚动 </title>
    <script language="javascript">
    <!--
    function scrollup(o,d,c)
    {
    if(d==c)
    {
    var t=o.firstChild.cloneNode(true);
    o.removeChild(o.firstChild);o.appendChild(t);
    t.style.marginLeft=o.firstChild.style.marginLeft='0px';
    hscroll(o);
    }
    else
    {
    ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
    o.firstChild.style.marginLeft=-c+l+'px';
    window.setTimeout(function(){scrollup(o,d,c-l)},50);
    }
    }
    function hscroll(o)
    {
    var w1=o.firstChild.offsetHeight,w2=o.offsetHeight;
    if(w1<=w2)return;
    tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
    }
    function hs(o,d,c,p)
    {
    c++;var t=(c>0?-c:c);o.firstChild.style.marginTop=t+'px';
    if(c==d)
    {
    if(d==0)
    {
    tc=window.setTimeout(function(){hs(o,p,0,p)},2500);
    }
    else
    tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);
    }
    else
    tc=window.setTimeout(function(){hs(o,d,c,p)},5);
    }
    //-->
    </script> 
    </head> 
    <body> 
    <div id="UpInfo" style="overflow:hidden; text-align:left; height:20px; width:200;">
    <div style="float:left; width:20px;">11</div>
    <div style="float:left; width:20px;">12</div>
    <div style="float:left; width:20px;">13</div>
    <div style="float:left; width:20px;">14</div>
    <div style="float:left; width:20px;">15</div>
    <div style="float:left; width:20px;">16</div>
    <div style="float:left; width:20px;">17</div>
    <div style="float:left; width:20px;">18</div>
    <div style="float:left; width:20px;">19</div>
    <div style="float:left; width:20px;">20</div>
    </div>
    <script language="javascript">
    var tc;
    window.onload=function()
    {
    var o=document.getElementById('UpInfo');hscroll(o);
    window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginTop='0px';scrollup(o,90,0);},3000);
    }
    </script>
    </body> 
    </html> 再给一个
      

  6.   

    很简单的呀，
    第一，用<marquee>你所需要的滚动文字<marquuee>
    第二 有dreamware 中的行为来做，你要插入层，还要设置时间轴，通过时间轴上的首尾密集程度来决定你滚动的快慢和方向，你想怎么饶就把鼠标怎么移动，但首尾必须相连啊
      

  7.   

    <title>字幕_间断_向左</title>
    <style>
    *{}
    ul{height:25px;width:3502px;overflow:visible;padding;margin:0;border:0px red solid}
    li{LIST-STYLE-TYPE: none;float:left;height:25px;width:200px;padding-left:20px;;margin:0;font-size:12px;line-height:25px;}
    </style>
    <div id="picrun" style="height:25px;width:200px;overflow:hidden;border:1px #eee solid">
    <ul id=piccons>
    <li><a href="">信息一</a>        
    <li><a href="">信息二</a>
    <li><a href="">信息三</a>
    <li><a href="">信息四</a>
    <li><a href="">信息五</a></li></ul>
    </div>
    <script type="text/JavaScript">
    var oMarquee = document.getElementById("piccons"); //滚动对象
    oMarquee.style.marginLeft=0;
    var iLineWidth = 200; //单宽高度，像素
    var iLineCount = 5; //实际列数
    var iScrollAmount = 2; //每次滚动宽度，像素
    var stopTime=3000;//间隔时间(3s)
    var k=-1
    var timer
    oMarquee.innerHTML += oMarquee.innerHTML;
    function run() {
    var ML=parseInt(oMarquee.style.marginLeft);
    oMarquee.style.marginLeft = (ML-iScrollAmount)+"px";
    if ( ML <= 0-iLineCount * iLineWidth ){
    oMarquee.style.marginLeft = 0;
    k=-1
    }
    if ( ML == k * iLineWidth+iScrollAmount) {
    k--
    timer=window.setTimeout( run, stopTime );
    }else 
    timer=window.setTimeout( run, 1);
    }
    oMarquee.onmouseover=function(){clearTimeout(timer)}
    oMarquee.onmouseout=function(){setTimeout( run, stopTime )}setTimeout( run, stopTime );
    </script>