前端滚动字幕

<style type="text/css">
#container{
     /*设置背景颜色便于调整位置
     background:#CCCCCC;
     */
     position:absolute;
     top: 15px;
     left: 300px;
     overflow:hidden;
     width:550px;
     height:100px;
     line-height:100px;
     margin:100px;
 }
 #content{
     color: red;
     position:absolute;
     left:0;
     top:0;
     white-space:nowrap;
 }
</style>

这是CSS设置，背景颜色没写。

字幕内容及大小颜色设置：

<div id="container">
     <div id="content" ><font size="7">热烈欢迎领导莅临指导 ！</font></div>
 </div>

javascript代码：

<script type="text/javascript">
 		
 if(!window.rollWord){
      var rollWord = {
            container:document.getElementById("container"),
            content:document.getElementById("content"),
            _containerWidth:1,
            _contentWidth:1,
            _speed:1,
            setSpeed:function(opt){
                  var This = this;
                  This._speed = opt;
            },
            setContainerWidth:function(){
                  var This = this;
                  This._containerWidth = This.container.offsetWidth;
            },
            setContentWidth:function(){
                  var This = this;
                  This._contentWidth = This.content.offsetWidth;
            },
            roll:function(){
                  var This = this;
                  This.content.style.left = parseInt(This._containerWidth) + "px";
                  var time = setInterval(function(){This.move()},20);
                  This.container.onmouseover = function(){
                       clearInterval(time);
                  };
                  This.container.onmouseout = function(){
                       time = setInterval(function(){This.move()},20);
                  };
            },
            move:function(){
                  var This = this;
                  if(parseInt(This.content.style.left)+This._contentWidth > 0)
                  {
                       This.content.style.left = parseInt(This.content.style.left)-This._speed + "px";
                  }
                   else
                   {
                       This.content.style.left = parseInt(This._containerWidth) + "px";
                   }                 
            },
            init:function(opt){
                 var This = this;
                 var speed = opt.speed || 1;
                 This.setSpeed(speed);
                 This.setContainerWidth();
                 This.setContentWidth();
                 This.roll();
            }
       }
 }
       rollWord.init({speed:2});
 </script>

鼠标放到字幕上，字幕会暂停。

因为录制GIF的软件所限，会出现跳帧的情况，实际展示的字幕滚动效果是非常自然的。