Scroll-Jquery列表无间隙滚动 

<!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 property="qc:admins" content="0441463377665226375" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>首页 ${web.name}</title>
</head>
<body>
<#include "/WEB-INF/user_base/face_com_www/tuike/include/head.html">
 
<script>
 nav_index=1;
</script>

<script>
function ri(){
    
    $("#zong").attr("class","");
    $("#ri").attr("class","span_now");
    $("#zong2").hide();
    $("#ri2").show();
}
function zong(){
    
    $("#zong").attr("class","span_now");
    $("#ri").attr("class","");
    $("#zong2").show();
    $("#ri2").hide(); 
}
</script>

<div class="wal">
<!--wal-->
<#include "top.html">
<span class="clear_f"></span>
<div class="h10"></div>
<div class="fl w332">
            <div><img src="image/title5.gif" /></div>
            <div class="box_2 hotTopic">
                 <ul>
                 <@cms.ArtiList inner='1' isPage='1' pageNo=pageNo chnlId='1668' count='4' orderBy=0 ;pa> 
                      <li>
                          <div class="num">阅读(${pa.visitTotal})</div>
                          <h2><a href="${pa.url}">${pa.tit(18)!}</a></h2>
                          <div class="content"><a href="${pa.url}">${pa.desc(45)!}</a></div>
                      </li>
                </@cms.ArtiList>   
                      
                 </ul>
            </div>
            <div class="b_7"></div>
            <div class="h7"></div>
            <div class="teamTitle">
                 <span id="ri" class="span_now" onclick="ri()">日榜单</span>
                 <span id="zong" onclick="zong()">总榜单</span>
            </div>
            <div class="teamList2" id="ri2" >
                 <#assign to=action.getToday()>
                 <ul>
                      <#list to as t>
                      <li>
                          <div class="fl"><a href="/fans/FansList.htm?fid=${t.id}"><img src="/res_base/face_com_www/upload${t.pic!}" width="61" height="61" /></a></div>
                          <div class="fr">
                         
                          <b><a href="/fans/FansList.htm?fid=${t.id}">${t.name}</a></b><br />
                          
                          <span><b>${t.get("Members")}</b>人 | 等级：<#if t.leve??>${t.leve}<#else>一级</#if> | 排名：${t_index+1}</span><br />
                          日盖砖：<span>${t.countZ} 块</span>
                          </div>
                      </li>
                      </#list>
                 </ul>
            </div>
             <div class="teamList2" id="zong2" style="display:none" >
                  
                      
                 <#assign to=action.getSum()>
                 <ul>
                      <#list to as t>
                      <li>
                          <div class="fl"><a href="/fans/FansList.htm?fid=${t.id}"><img src="/res_base/face_com_www/upload${t.pic!}" width="61" height="61" /></a></div>
                          <div class="fr">
                           <b><a href="/fans/FansList.htm?fid=${t.id}">${t.name}</a></b><br />
                          
                          <span><b>${t.get("Members")}</b>人 | 等级：<#if t.leve??>${t.leve}<#else>一级</#if>  | 排名：${t_index+1}</span><br />
                          总盖砖：<span>${t.countZ} 块</span>
                          </div>
                        
                      </li>
                      </#list> 
                 </ul>
            </div>
            <div class="teamB"></div>
</div>
<div class="fr w621" id="container">
            <div class="t_2" style="position:relative">
            <img src="image/title24.png" id="allf" style=" position:absolute;left:20px;top:10px;border-bottom:#000000 solid 2px" onclick="showFeed()" />  
            <img id="myf" src="image/title34_my.png" style="position:absolute;left:100px;top:10px;" onclick="showTitle()" />
            </div>
            <div class="box_2 indexNews indexNews1" id="feedMsg" style="position:relative;">
                 <ul id="showDivTop">
                 <@cms.feedsList row="20" page="1" score="0" mid="0" from="0" beginTime="" endTime="" asc="";c>
                     <#if c.cmsMember??>
                      <li class="allfeed" onmouseover="$(this).css('background','#A0A0A4')" onmouseout="$(this).css('background','')" style="padding:3px">
                          <div class="fl img_div"><a href="${c.cmsMember.url}"><img src="${c.cmsMember.member.user.htmlLogo}" width="50" height="50" style="border:#A0A0A4 solid 1px" /></a></div>
                          <div class="fr contentDiv">
                               <div class="content">
                               <b> <a href="${c.cmsMember.url!}">${c.cmsMember.member.user.realName}</a></b>　${action.FaceToHtml(c.doSthing)!}　　<a href="${c.url!}" style="color:#007F55">查看详情...</a>
                               </div>
                               <div class="time">
                               <span style="float:right;margin-right:20px"> ${c.passTime!}　来自 ${c.fromWhere!}</span>
                               
                               </div>
                          </div>
                          <span class="clear_f"></span>
                      </li>
                     </#if>
                  </@cms.feedsList>
                 </ul>
               </div>
               <div class="box_2 indexNews indexNews1" id="artMsg" style="position:relative;display: none;">
                 <ul id="showDivTop1">
                  <@cms.ArtiList inner='1' isPage='1' chnlId="1675" pageNo=pageNo count='15' fansid=0 orderBy=3 ;pasd>    
                      <li class="myfeed" onmouseover="$(this).css('background','#A0A0A4')" onmouseout="$(this).css('background','')" style="padding:3px">
                          <div class="fl img_div">
                                  <a href="${pasd.url!}" target="_blank" >
                                      <img src="${pasd.fans.logo!}" alt="fans图" width="52px" height="52px"/>
                                  </a>
                          </div>
                          <div class="fr contentDiv">
                               <div class="content">
                                       <#if pasd.title?length gt 27>
                                          ${pasd.title?substring(0,27)!}...
                                      <#else>
                                          ${pasd.title!}
                                      </#if>
                                       <b><a href="${pasd.url!}" target="_blank">查看详情</a></b>
                               </div>
                               <div class="time">
                                       <span style="color:#007F55;float:right">${pasd.visitTotal!}浏览量</span>
                               </div>
                               <div class="time">
                                       <span style="float:right;margin-right:20px">${pasd.passTime!} 来自 ${pasd.fans.name!}</span>
                               </div>
                          </div>
                          <span class="clear_f"></span>
                      </li>
                      </@cms.ArtiList>
                    </ul>
               <script type="text/javascript">
               (function(B){
                   function _ROLL(obj){
                      this.ele = document.getElementById(obj);
                   this.interval = false;
                   this.currentNode = 0;
                   this.passNode = 0;
                   this.speed = 100;
                   this.childs = _childs(this.ele);
                   this.childHeight = parseInt(_style(this.childs[0])['height']);
                       addEvent(this.ele,'mouseover',function(){
                                                   window._loveYR.pause();
                           });
                    addEvent(this.ele,'mouseout',function(){
                                                   window._loveYR.start(_loveYR.speed);
                           });
                   }
                   function _style(obj){
                     return obj.currentStyle || document.defaultView.getComputedStyle(obj,null);
                   }
                   function _childs(obj){
                   var childs = [];
                   for(var i=0;i<obj.childNodes.length;i++){
                   var _this = obj.childNodes[i];
                   if(_this.nodeType===1){
                   childs.push(_this);
                   }
                   }   
                   return childs;
                   }
                 function addEvent(elem,evt,func){
                    if(-[1,]){
                     elem.addEventListener(evt,func,false);   
                    }else{
                     elem.attachEvent('on'+evt,func);
                    };
                 }
                 function innerest(elem){
                      var c = elem;
                   while(c.childNodes.item(0).nodeType==1){
                       c = c.childNodes.item(0);
                   }
                   return c;
                 }
                   _ROLL.prototype = {
                      start:function(s){
                           var _this = this;
                     _this.speed = s || 100;
                        _this.interval = setInterval(function(){
                          _this.ele.scrollTop += 1;
                       _this.passNode++;
                       if(_this.passNode%_this.childHeight==0){
                          var o = _this.childs[_this.currentNode] || _this.childs[0];
                          _this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0;
                          _this.passNode = 0;
                          _this.ele.scrollTop = 0;
                          _this.ele.appendChild(o);
                       }
                        },_this.speed);
                   },
                   pause:function(){
                   var _this = this;
                      clearInterval(_this.interval);
                   }
                   }
                    B.mar = function(obj){B._loveYR = new _ROLL(obj); return B._loveYR;}
                })(window);
               $(document).ready(function(){
                   marqueen('feedMsg').start(30/*速度默认100*/);
               });
               function showFeed(){
                    $("#feedMsg").show();
                    $("#artMsg").hide();
                    $("#allf").css("border-bottom","#000000 solid 2px"); 
                    $("#myf").css("border-bottom","none");
                }
               </script>
                 <span class="clear_f"></span>
            </div>
            <div class="b_2"></div>
            <div class="h7"></div>
            <div class="t_8"><img src="image/title25.png" /></div>
            <div class="box_2 newMember">
                 <div class="fl list1">
                      <ul>
                            <@cms.cmsMemberList  reCommend="1" row="2";c>
                               <#if c.member.user?? && c.member.user.realName??>
                              <li>
                                  <div class="fl"><a href="${c.url!}"><img src="${c.member.user.htmlLogo!}" height="61" width="60"/></a></div>
                                  <div class="fr" style="width:78px">
                                  <b><a href="${c.url!}">${c.member.user.realName!}</a></b><br/> 
                                  <a><#if c.member.user.city??><#if c.member.user.city.parent??>${c.member.user.city.parent.name!}</#if>-${c.member.user.city.name!}</#if></a>
                                  </div>
                              </li>
                               </#if>
                         </@cms.cmsMemberList>
                      </ul>
                 </div>
                 <div class="fr list2">
                      <ul>
                          <@cms.cmsMemberList    row="18";c ,index>
                          <li >
                              <a href="${c.url!}"><img src="${c.member.user.htmlLogo!}" height="55" width="55" /></a>
                              <div style="margin-top:-1px;width:70px;height:14px; overflow:hidden">
                              
                              ${c.member.user.realName!} 
                              </div>
                          </li>
                          
                          </@cms.cmsMemberList>
                      </ul>
                 </div>
            </div>
            <div class="b_2"></div>
            <div class="h7"></div>
            <div class="t_8"><img src="image/title26.png" /></div>
            <div class="box_2 HotActivity">
                 <div class="list">
                 <#assign activity = action.getAllactivity().list>
                 <ul>
                      <#list activity as a>
                      <li>
                     
                         <a href="${a.url}" style="text-decoration:none"> <h2>${a.stit(12)}</h2></a>
                          
                          <div>${a.desc(34)}</div>
                          
                          <div><a href="${a.url}" style="text-decoration:none">（<b>${a.joinCount!}</b>）人参与</a></div>
                          <div>${a.passTime!}</div>
                      </li>
                      </#list>
                 </ul>
                 </div>
            </div>
            <div class="b_2"></div>
    </div>
<span class="clear_f"></span>
<div class="h10"></div>
<!--walEnd-->
</div>
<script type="text/javascript">
(function(A){
       function _ROLL(obj){
          this.ele = document.getElementById(obj);
       this.interval = false;
       this.currentNode = 0;
       this.passNode = 0;
       this.speed = 100;
       this.childs = _childs(this.ele);
       this.childHeight = parseInt(_style(this.childs[0])['height']);
           addEvent(this.ele,'mouseover',function(){
                                       window._loveYR.pause();
               });
        addEvent(this.ele,'mouseout',function(){
                                       window._loveYR.start(_loveYR.speed);
               });
       }
       function _style(obj){
         return obj.currentStyle || document.defaultView.getComputedStyle(obj,null);
       }
       function _childs(obj){
       var childs = [];
       for(var i=0;i<obj.childNodes.length;i++){
       var _this = obj.childNodes[i];
       if(_this.nodeType===1){
       childs.push(_this);
       }
       }   
       return childs;
       }
     function addEvent(elem,evt,func){
        if(-[1,]){
         elem.addEventListener(evt,func,false);   
        }else{
         elem.attachEvent('on'+evt,func);
        };
     }
     function innerest(elem){
          var c = elem;
       while(c.childNodes.item(0).nodeType==1){
           c = c.childNodes.item(0);
       }
       return c;
     }
       _ROLL.prototype = {
          start:function(s){
               var _this = this;
         _this.speed = s || 100;
            _this.interval = setInterval(function(){
              _this.ele.scrollTop += 1;
           _this.passNode++;
           if(_this.passNode%_this.childHeight==0){
              var o = _this.childs[_this.currentNode] || _this.childs[0];
              _this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0;
              _this.passNode = 0;
              _this.ele.scrollTop = 0;
              _this.ele.appendChild(o);
           }
            },_this.speed);
       },
       pause:function(){
       var _this = this;
          clearInterval(_this.interval);
       }
       }
        A.marqueen = function(obj){A._loveYR = new _ROLL(obj); return A._loveYR;}
    })(window);
function showTitle(){
    $("#feedMsg").hide();
    $("#artMsg").show();
    $("#myf").css("border-bottom","#000000 solid 2px"); 
    $("#allf").css("border-bottom","none");
}
    $(document).ready(function(){
        marqueen('artMsg').start(30/*速度默认100*/);
    });
</script>
<#include "/WEB-INF/user_base/face_com_www/tuike/include/footer.html">  
</body>
</html>

以往都是只加上了一个一个列表滚动，但是今天遇到一个很奇怪的问题-我加上两个需要滚动的list之后，居然到最后第二个list滚动会越来越快！

经过分析发现两个list滚动都是共用了一个js脚本，而且以前我的第二个list滚动时间绑定在了onclick事件上(如下代码)，如果用户连续点击几次之后会发现该list滚动速度会明显加快！

function showTitle(){
    $("#feedMsg").hide();
    $("#artMsg").show();
    $("#myf").css("border-bottom","#000000 solid 2px"); 
    $("#allf").css("border-bottom","none");
    marqueen('artMsg').start(30/*速度默认100*/);
}

最后没办法了，为了满足需求就只能是COPY两端js代码，然后把变量改成不一样的了。。。

等找到更好的方法再贴出来。。。

posted @ 2013-06-03 16:31  MuaRine  阅读(1090)  评论(0)  编辑  收藏  举报