请教：js 实现平滑滚动字幕

想实现公告文字循环从右滚到左，用HTML自带的标签<marguee>，滚动很闪，看不清，而且鼠标移过去不能停止

解决方案 »

  1.   

    3点说明：
    1.marquee标签可以设置使得鼠标移过去，停止
    如：<marquee onmouseout="this.start()" onmouseover="this.stop()">用来设置鼠标移出该区域时继续滚动</marquee>2.scrollamount这个参数可以控制速度
    3.还有就只不用marquee通过onmouseover()控制node.style.left属性（前提：节点的position为"absolute"）
    最后，希望楼主成功
      

  2.   

    <style>
    #s{ width:500px; border:1px solid #000; overflow:hidden;}
    #s div{ width:1000px;}
    #s #i span{ width:500px; display:block; float:left;}
    </style>
    <div id="s">
    <div id="i">
    <span id="t">要滚动的文字，滚啊滚，滚啊滚</span>
    </div>
    </div><script type="text/javascript">
    var speed = 10
    var s = document.getElementById("s")
    var i = document.getElementById("i")
    var t = document.getElementById("t")
    i.appendChild(t.cloneNode(true))
    function scroll()
    {
         s.scrollLeft += 1
         if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0;
    }
    window.setInterval(scroll,speed)
    </script>
      

  3.   

    <style>
    #s{ width:500px; border:1px solid #000; overflow:hidden;}
    #s div{ width:1000px;}
    #s #i span{ width:500px; display:block; float:left;}
    </style>
    <div id="s">
    <div id="i">
    <span id="t">要滚动的文字，滚啊滚，滚啊滚</span>
    </div>
    </div><script type="text/javascript">
    var speed = 10
    var s = document.getElementById("s")
    var i = document.getElementById("i")
    var t = document.getElementById("t")
    var d 
    i.appendChild(t.cloneNode(true))
    function scroll()
    {
         s.scrollLeft += 1
         if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0;
    }
    d = window.setInterval(scroll,speed)
    s.onmouseover = function(){window.clearInterval(d)}
    s.onmouseout = function(){d = window.setInterval(scroll,speed)}
    </script>
    这样可以停顿
      

  4.   

    楼上：如果要滚动的内容比较长，怎么使它在一行内滚动呢，怎么设置css
      

  5.   


    #s div{ width:1000px;}
    #s #i span{ width:500px; display:block; float:left;}改这两个样式的宽度
      

  6.   


    设置属性 white-spacing: nowrap
      

  7.   

    自己做的一个走马灯组件：window.XX = window.XX || {};
    XX.Fx =  XX.Fx || {};
    /*
    走马灯构造函数；
    参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果
    opts:JSON格式的数据，可传入的参数包括:
    {
           speed //滚动速度，以毫秒为单位，默认为1000
       step //滚动像素， 默认为5
       direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'
    }
    */
    XX.Fx.Marquee = function(elem, opts){
    opts = opts || {};
    this.el = elem;
    this.speed = opts.speed || 1000;
    this.step  = opts.step || 5;
    var dir = this.direction = opts.direction || 'left';

    if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {
    throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');
    }

    elem.style.overflow = 'hidden';
    elem.style.whiteSpace = 'nowrap';
    if(dir === 'right' || dir === 'bottom'){
    this.step = - this.step ;
    } 
    this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';
    this.size   = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);
    };XX.Fx.Marquee.prototype.start = function(){
    if(this.timer){
    clearTimeout(this.timer);
    }

    this.el.innerHTML += this.el.innerHTML;
    var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;
    switch (this.direction){
    case 'right':
    case 'bottom':
    move =  function(){
    if(el[offset] > 0){
    el[offset] += step;
    setTimeout(move, speed)
    } else{
    el[offset] = that.size;
    setTimeout(move, speed)
    }
    };
    break;
    default:
    move =  function(){
    if(el[offset] < size){
    el[offset] += step;
    setTimeout(move, speed)
    } else{
    el[offset] = 0;
    setTimeout(move, speed)
    }
    };
    } this.timer = setTimeout(move, speed);
    };XX.Fx.Marquee.prototype.stop = function(){
    clearTimeout(this.timer);
    };
    调用代码：<!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" />
    <style type="text/css">
    body{margin:3px auto;text-align:center;}
    </style>
    <script type="text/javascript" src="xxFxMarquee.js"></script>
    <script type="text/javascript">
    window.onload = function(){
    var m = new XX.Fx.Marquee(document.getElementById('textdiv'), {direction:'top', speed:20, step:1});
    m.start();

    };
    </script>
    <title>无标题文档</title>
    </head><body>
     <h3>js marquee 滚动效果演示</h3>
    <div id="textdiv" style="border:1 solid #c0c0c0;text-align:left;width:650px;height:100px">
    <h2>--------------------走马灯演示测试--------------------------</h2><br />
    文字滚动测试1<br />
    文字滚动测试2<br />
    文字滚动测试3<br />
    <br />
    制作者：Exodia<br />
    联系方式:QQ39942816<br />
    <a href="http://blog.csdn.net/dxx1988">BLOG地址</a>
    </div>
    </body>
    </html>
    文字悬停效果，可以自己添加mouseover函数控制。