日期:2014-05-16  浏览次数:20414 次

JS新闻无缝滚动封装函数

?

?

JS新闻无缝滚动封装函数:

?

<!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" xml:lang="zh-CN" lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>新闻滚动</title>
  </head>
  <body>
         <div class="zxfb">
            <strong>新闻滚动</strong>
            <ul>
              <li class="xj_list_bg">
                <div class="xj_cl">最新发布材料</div>
 
              </li>
            </ul>
            <ul id="rolltxt" style="overflow:hidden;height:126px;">
                <li>
                  <div class="xj_cl" title="镜面不锈钢">
                    镜面不锈钢                  </div>
         
                </li>
                <li>
                  <div class="xj_cl" title="测试文字询价">
                    测试文字询价                  </div>
                
                </li>
                <li>
                  <div class="xj_cl" title="混流式通风机">
                    混流式通风机                  </div>
                 
                </li>
                <li>
                  <div class="xj_cl" title="混流式通风机">
                    混流式通风机                  </div>
                  
                </li>
                <li>
                  <div class="xj_cl" title="混流式通风机">
                    混流式通风机                  </div>
                 
                </li>
                <li>
                  <div class="xj_cl" title="低噪声风机箱">
                    低噪声风机箱                  </div>
                  
                </li>
                <li>
                  <div class="xj_cl" title="低噪声风机箱">
                    低噪声风机箱                  </div>
                 
                </li>
                <li>
                  <div class="xj_cl" title="低噪声风机箱">
                    低噪声风机箱                  </div>
                 
                </li>
                <li>
                  <div class="xj_cl" title="吊装式排气扇">
                    吊装式排气扇                  </div>
                 
                </li>
                <li>
                  <div class="xj_cl" title="吊装式排气扇">
                    吊装式排气扇                  </div>
              
                </li>
            </ul>
          </div>
        </div>
      
    <script type="text/javascript" defer="defer">
      /*
       函数功能:实现文字无缝滚动效果
       函数startmarquee的参数:
       lh:文字一次向上滚动的距离或高度;
       speed:滚动间隔时间
       delay:滚动停顿的时间间隔;
      */
      function startmarquee(lh,speed,delay){
        var interval_run;
        var pause = false;
        var scroll_area = document.getElementById("rolltxt");
        scroll_area.innerHTML  += scroll_area.innerHTML;     //复制的目的在于给文字不间断向上滚动提供过渡。
        scroll_area.onmouseover = function(){ pause = true  }; //鼠标滑过,停止滚动;
        scroll_area.onmouseout  = function(){ pause = false }; //鼠标离开,开始滚动;
        scroll_area.scrollTop = 0; //文字顶端与滚动区域顶端的距离,初始值为0;

        function start(){
          interval_run = setInterval(scrolling,speed);
          if(!pause){ scroll_area.scrollTop += 1;}//滚动停止或开始,取决于p传来的布尔值;
        }

        function scrolling(){
          if(scroll_area.scrollTop % lh != 0){//如果不被整除,即一次上移的高度达不到lh,则内容会继续往上滚动;
            scroll_area.scrollTop += 1;
            if(scroll_area.scrollTop >= scroll_area.scrollHeight/2)
              scroll_area.scrollTop = 0;//对象scroll_area中的内容之前被复制了一次,所以它的滚动高度,其实是原来内容的两倍高度;当内容向上滚动到scrollHeight/2的高度时,全部3行文

字已经显示了一遍,至此整块内容sc