zoukankan      html  css  js  c++  java

  • ScrollJquery列表无间隙滚动

    <!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="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;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代码，然后把变量改成不一样的了。。。

    等找到更好的方法再贴出来。。。
  • 相关阅读:
    WPF DelegateCommand 出现Specified cast is not valid
    WPF DelegateCommand 出现Specified cast is not valid
    WPF DelegateCommand 出现Specified cast is not valid
    win10 sdk 是否向下兼容
    win10 sdk 是否向下兼容
    win10 sdk 是否向下兼容
    PHP extract() 函数
    PHP end() 函数
    PHP each() 函数
    PHP current() 函数
  • 原文地址：https://www.cnblogs.com/xmaomao/p/3115676.html
Copyright © 2011-2022 走看看