<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<title>文字循环出现</title>
</head>
<body>
<ul class="alt">
          <div id="mq" style="width:280px;white-space:nowrap; font-size:12px; line-height:22px;overflow:hidden" onmouseover="scrollUtils.isScroll=false" onmouseout="scrollUtils.isScroll=true">
            
              <li><a href="http://www.fm1025s.com.cn/" target="_blank" title="北京体育广播网站全新改版 创建名嘴聚集地">北京体育广播网站全新改版 创建名嘴聚集地</a></li>            
          
              <li><a href="./08/tn/200810/t20081020_921202.htm" target="_blank" title="“青檬之星”初赛前两场 精彩呈现">“青檬之星”初赛前两场 精彩呈现</a></li>            
          
              <li><a href="http://topic.bjradio.com.cn/08zt/ycds/" target="_blank" title="音乐广播&quot;我的974&quot;台标乐演唱大赛启动">音乐广播"我的974"台标乐演唱大赛启动</a></li>            
          
              <li><a href="http://fm974.bjradio.com.cn/" target="_blank" title="精彩无限!FM974音乐广播网站全新上线">精彩无限!FM974音乐广播网站全新上线</a></li>            
          
              <li><a href="./08/tn/200809/t20080902_814798.htm" target="_blank" title="第二届纪实小说演播人大赛复赛结果说明">第二届纪实小说演播人大赛复赛结果说明</a></li>            
          
              <li><a href="./08/tn/200808/t20080825_766174.htm" target="_blank" title="北京电台邀您参与《曾经的记忆》征文活动">北京电台邀您参与《曾经的记忆》征文活动</a></li>            
          
              <li><a href="./08/tn/200808/t20080820_751615.htm" target="_blank" title="[视频]北京电台记者婧琳眼中的胜利与失利">[视频]北京电台记者婧琳眼中的胜利与失利</a></li>            
          
              <li><a href="http://v.bjradio.com.cn/play/Play?id=7984" target="_blank" title="[视频]晓丽臧轶洁讲报道人员辛苦及志愿者">[视频]晓丽臧轶洁讲报道人员辛苦及志愿者</a></li>            
          
          
              <li><a href="http://www.fm1025s.com.cn/" target="_blank" title="北京体育广播网站全新改版 创建名嘴聚集地">北京体育广播网站全新改版 创建名嘴聚集地</a></li>            
          
              <li><a href="./08/tn/200810/t20081020_921202.htm" target="_blank" title="“青檬之星”初赛前两场 精彩呈现">“青檬之星”初赛前两场 精彩呈现</a></li>            
          
              <li><a href="http://topic.bjradio.com.cn/08zt/ycds/" target="_blank" title="音乐广播&quot;我的974&quot;台标乐演唱大赛启动">音乐广播"我的974"台标乐演唱大赛启动</a></li>            
          
              <li><a href="http://fm974.bjradio.com.cn/" target="_blank" title="精彩无限!FM974音乐广播网站全新上线">精彩无限!FM974音乐广播网站全新上线</a></li>            
          
              <li><a href="./08/tn/200809/t20080902_814798.htm" target="_blank" title="第二届纪实小说演播人大赛复赛结果说明">第二届纪实小说演播人大赛复赛结果说明</a></li>            
          
              <li><a href="./08/tn/200808/t20080825_766174.htm" target="_blank" title="北京电台邀您参与《曾经的记忆》征文活动">北京电台邀您参与《曾经的记忆》征文活动</a></li>            
          
              <li><a href="./08/tn/200808/t20080820_751615.htm" target="_blank" title="[视频]北京电台记者婧琳眼中的胜利与失利">[视频]北京电台记者婧琳眼中的胜利与失利</a></li>            
          
              <li><a href="http://v.bjradio.com.cn/play/Play?id=7984" target="_blank" title="[视频]晓丽臧轶洁讲报道人员辛苦及志愿者">[视频]晓丽臧轶洁讲报道人员辛苦及志愿者</a></li>            
          
          </div>          </ul> <script> 
/*var oMarquee = document.getElementById("mq"); //滚动对象 
var iLineHeight = 88; //单行高度,像素 
var iLineCount = 4; //实际行数 
var iScrollAmount = 1; //每次滚动高度,像素 
function run() { 
 oMarquee.scrollTop += iScrollAmount; 
 if ( oMarquee.scrollTop == iLineCount * iLineHeight ){ 
oMarquee.scrollTop = 0; 
 }
 if ( oMarquee.scrollTop % iLineHeight == 0 ) { 
window.setTimeout( "run()", 500 ); 
 } else { 
window.setTimeout( "run()", 50 ); 
 } 
 } 
oMarquee.innerHTML += oMarquee.innerHTML; 
window.setTimeout( "run()", 50 ); */$(function(){
scrollUtils.scroll(10);
});
var scrollUtils = {
isScroll:true,
scroll:function(val){
var lineHeight = $("#mq").find("li").css("line-height").toString().match(/\d+/);
$("#mq").css({"height":lineHeight*val});
var top = $("#mq").scrollTop();
function run(){
if(!scrollUtils.isScroll){
return;
}
if(top >= ($("#mq").find("li").size()*lineHeight-$("#mq").height())) {
top = 0;
}else {
top = top + 1;
$("#mq").scrollTop(top);
}
};
setInterval(run,50);
}
};</script>
</body>
</html> 用这种吧,我使用jquery重新写了一个,dom我很少用了,要滚多少条,直接在scrollUtils.scroll(10)里面设置参数就可以了

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <title>文字循环出现</title>
    </head>
    <body>
    <ul class="alt">
              <div id="mq" style="width:280px;white-space:nowrap; font-size:12px; line-height:22px;overflow:hidden" onmouseover="scrollUtils.isScroll=false" onmouseout="scrollUtils.isScroll=true">
                
                  <li><a href="http://www.fm1025s.com.cn/" target="_blank" title="北京体育广播网站全新改版 创建名嘴聚集地">北京体育广播网站全新改版 创建名嘴聚集地</a></li>            
              
                  <li><a href="./08/tn/200810/t20081020_921202.htm" target="_blank" title="“青檬之星”初赛前两场 精彩呈现">“青檬之星”初赛前两场 精彩呈现</a></li>            
              
                  <li><a href="http://topic.bjradio.com.cn/08zt/ycds/" target="_blank" title="音乐广播&quot;我的974&quot;台标乐演唱大赛启动">音乐广播"我的974"台标乐演唱大赛启动</a></li>            
              
                  <li><a href="http://fm974.bjradio.com.cn/" target="_blank" title="精彩无限!FM974音乐广播网站全新上线">精彩无限!FM974音乐广播网站全新上线</a></li>            
              
                  <li><a href="./08/tn/200809/t20080902_814798.htm" target="_blank" title="第二届纪实小说演播人大赛复赛结果说明">第二届纪实小说演播人大赛复赛结果说明</a></li>            
              
                  <li><a href="./08/tn/200808/t20080825_766174.htm" target="_blank" title="北京电台邀您参与《曾经的记忆》征文活动">北京电台邀您参与《曾经的记忆》征文活动</a></li>            
              
                  <li><a href="./08/tn/200808/t20080820_751615.htm" target="_blank" title="[视频]北京电台记者婧琳眼中的胜利与失利">[视频]北京电台记者婧琳眼中的胜利与失利</a></li>            
              
                  <li><a href="http://v.bjradio.com.cn/play/Play?id=7984" target="_blank" title="[视频]晓丽臧轶洁讲报道人员辛苦及志愿者">[视频]晓丽臧轶洁讲报道人员辛苦及志愿者</a></li>            
              
              
                  <li><a href="http://www.fm1025s.com.cn/" target="_blank" title="北京体育广播网站全新改版 创建名嘴聚集地">北京体育广播网站全新改版 创建名嘴聚集地</a></li>            
              
                  <li><a href="./08/tn/200810/t20081020_921202.htm" target="_blank" title="“青檬之星”初赛前两场 精彩呈现">“青檬之星”初赛前两场 精彩呈现</a></li>            
              
                  <li><a href="http://topic.bjradio.com.cn/08zt/ycds/" target="_blank" title="音乐广播&quot;我的974&quot;台标乐演唱大赛启动">音乐广播"我的974"台标乐演唱大赛启动</a></li>            
              
                  <li><a href="http://fm974.bjradio.com.cn/" target="_blank" title="精彩无限!FM974音乐广播网站全新上线">精彩无限!FM974音乐广播网站全新上线</a></li>            
              
                  <li><a href="./08/tn/200809/t20080902_814798.htm" target="_blank" title="第二届纪实小说演播人大赛复赛结果说明">第二届纪实小说演播人大赛复赛结果说明</a></li>            
              
                  <li><a href="./08/tn/200808/t20080825_766174.htm" target="_blank" title="北京电台邀您参与《曾经的记忆》征文活动">北京电台邀您参与《曾经的记忆》征文活动</a></li>            
              
                  <li><a href="./08/tn/200808/t20080820_751615.htm" target="_blank" title="[视频]北京电台记者婧琳眼中的胜利与失利">[视频]北京电台记者婧琳眼中的胜利与失利</a></li>            
              
                  <li><a href="http://v.bjradio.com.cn/play/Play?id=7984" target="_blank" title="[视频]晓丽臧轶洁讲报道人员辛苦及志愿者">[视频]晓丽臧轶洁讲报道人员辛苦及志愿者</a></li>            
              
              </div>          </ul> <script> 
    /*var oMarquee = document.getElementById("mq"); //滚动对象 
    var iLineHeight = 88; //单行高度,像素 
    var iLineCount = 4; //实际行数 
    var iScrollAmount = 1; //每次滚动高度,像素 
    function run() { 
     oMarquee.scrollTop += iScrollAmount; 
     if ( oMarquee.scrollTop == iLineCount * iLineHeight ){ 
    oMarquee.scrollTop = 0; 
     }
     if ( oMarquee.scrollTop % iLineHeight == 0 ) { 
    window.setTimeout( "run()", 500 ); 
     } else { 
    window.setTimeout( "run()", 50 ); 
     } 
     } 
    oMarquee.innerHTML += oMarquee.innerHTML; 
    window.setTimeout( "run()", 50 ); */$(function(){
    scrollUtils.scroll(10);
    });
    var scrollUtils = {
    isScroll:true,
    scroll:function(val){
    var lineHeight = $("#mq").find("li").css("line-height").toString().match(/\d+/);
    $("#mq").css({"height":lineHeight*val});
    var top = $("#mq").scrollTop();
    function run(){
    if(!scrollUtils.isScroll){
    return;
    }
    if(top >= ($("#mq").find("li").size()*lineHeight-$("#mq").height())) {
    top = 0;
    setTimeout(run,500);
    }else {
    top = top + 1;
    $("#mq").scrollTop(top);
    setTimeout(run,50);
    }
    };
    setTimeout(run,50);
    }
    };</script>
    </body>
    </html> 
      

  2.   


    <div id="mq" style="width:280px;height:215px; white-space:nowrap; font-size:12px; line-height:22px;overflow:hidden" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"  >
    var oMarquee = document.getElementById("mq"); //滚动对象 
    var iLineHeight = 22; //单行高度,像素 
    var iLineCount = 16; //实际行数 
    var iScrollAmount = 1; //每次滚动高度,像素 
    function run() { 
     oMarquee.scrollTop += iScrollAmount; 
     if ( oMarquee.scrollTop == iLineCount * iLineHeight ) oMarquee.scrollTop = 0; 
     if ( oMarquee.scrollTop % iLineHeight == 0 ) { 
     window.setTimeout( "run()", 500 ); }
     else { 
     window.setTimeout( "run()", 50 ); } 
     } 
    oMarquee.innerHTML += oMarquee.innerHTML; 
    window.setTimeout("run()", 50 );