[JS效果]无间断滚动程序

[JS效果]无间断滚动程序

昨晚花了点时间给女友做了个无间断滚动程序，支持一个页中多个滚动块，只要class为scrollTextDiv 的dom中的内容都会被滚动显示，传上来给大家分享：

 

<! 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"   />
         < title > 无间断滚动程序示例 </ title >
         <!-- 效果代码开始(需要jquery库) -->
< script  type ="text/javascript"  src ="../js/jquery-1.3.1.js" ></ script >
< script  type ="text/javascript" >
     var  ScrollText  =  {            
            speed:  1 ,  // 每次滚动幅度
            interval:  10 ,  // 每次滚动间隔时间(毫秒)
            mouseControl:  true ,  // 是否在鼠标放上时暂停滚动
            
             /* ****上面的三个属性可以简单对滚动进行配置，以下代码请不要修改***** */
            clid:  ' scrollTextDiv ' ,
            text: [],
            _appendCount: [],
            intervalFlag:  0 ,
            init:  function (){
                 var  cl = $( ' . ' + ScrollText.clid);
                 if (ScrollText.mouseControl){
                    cl.mouseover( function (){ScrollText.stop();});
                    cl.mouseout( function (){ScrollText.play();});
                }
                cl.each( function (i){
                    ScrollText.text.push($( this ).html());
                    ScrollText._appendCount.push( 0 );
                });
                ScrollText.play();
            },
            doScrollText :  function (){
                 var  cl  =  $( ' . ' + ScrollText.clid);
                
                cl.each( function (i){
                      if ( this .scrollTop + cl.height() >= this .scrollHeight){
                         if (ScrollText._appendCount[i]  >   100 )
                        { // 清除无用内容，防止内容过多导致浏览器出现问题
                            ScrollText._appendCount[i]  =   0 ;
                            $( ' . ' + ScrollText.clid  +   '  . ' + ScrollText.clid + ' _temp ' ).remove();
                        }
                        $( ' <div class= ' + ScrollText.clid + ' _temp> ' + ScrollText.text[i] + ' </div> ' ).appendTo($( this ));
                        ScrollText._appendCount[i] ++ ;                        
                     }                 
                      this .scrollTop  += ScrollText.speed;
                });
            },
            play: function (){
                ScrollText.intervalFlag  =  window.setInterval( ' ScrollText.doScrollText(); ' ,ScrollText.interval);
            },
            stop:  function (){
                window.clearInterval(ScrollText.intervalFlag);
            }
        }
            
        $(document).ready( function (){
            ScrollText.init();    
        });
        
    
</ script >
<!-- 效果代码结束 -->
     </ head >
     < body >
     <!-- 测试效果代码开始 -->
         < div  class ="scrollTextDiv"  style ="height:150px; overflow:hidden;border:1px #666 solid;" >
            大家好家好1 < br  />
            大家好家好2 < br  />
            大家好家好3 < br  />
            大家好家好4 < br  />
            大家好家好5 < br  />
            大家好家好6 < br  />
            大家好家好7 < br  />
            大家好家好8 < br  />
         </ div >
         <!-- 测试效果代码结束 -->

     </ body >
</ html >

 

注：需要jquery库

posted on 2009-04-24 11:23 BoolYang 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/XiaoG/archive/2009/04/24/1442778.html