Scroll-Jquery列表无间隙滚动

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量94 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/xmaomao/archive/2013/06/03/3115676.html
版权 
<!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代码，然后把变量改成不一样的了。。。

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

转载于:https://www.cnblogs.com/xmaomao/archive/2013/06/03/3115676.html

angtacha5412
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jquery实现文字滚动，鼠标悬停效果
guorui_cara的博客
10-26 2778
这就是个简单的小栗子，希望可以帮助前端初学者。 效果：文字无缝滚动，鼠标悬停则停止，鼠标移开则重新滚动。 1、html代码：<div class="scroll"> <ul class="list-unstyled"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> <li>菠萝</li>
js+css实现表格无缝滚动
weixin_44389116的博客
07-04 559
【代码】js+css实现表格无缝滚动。
jquery文字向左无缝隙滚动
12-08
jquery 文字向左无缝隙滚动 跑马灯 自己写的 支持所有浏览器(已测试)
jquery无缝间歇向上滚动(间断滚动)
a124485758的博客
06-11 358
jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scroll...
jquery无间隙滚动、无缝滚动
webnoties的专栏
12-09 1826
JS图片向上滚动        img{    border: none;    }                                                                                                                                                            
Jquery实现无缝隙上下左右滚动，超简便代码
08-02
Jquery实现无缝隙上下左右滚动，超简便代码 值得一看的代码
jQuery实现列表无缝滚动
不争气争口馒头
10-06 3995
制作滚动表格，使用jQuery方法
weixin_58544706的博客
08-14 1029
滚动表格，使用jQuery
关于Jquery无限滚动插件kxbdMarquee使用过程所遇到的3个问题（结合tab栏切换，定时器未被清空，网页缩小后滚动效果消失）及解决方案
m0_50621863的博客
07-28 918
kxbdMarquee的基本使用(更改后的源码在文本末尾) 地址：https://github.com/erdouzhang/jquery.kxbdmarquee.js 使用方法及参数说明 * @DOM * <div id="marquee"> * <ul> * <li></li> * <li></li> * </ul> * </div> * @CSS
微信小程序scroll-view组件实现滚动动画
08-28
scroll-view 组件是微信小程序中的一种常用的滚动容器组件，可以用来实现滚动列表、滚动菜单等效果。它的基本使用方法是将 scroll-view 组件添加到页面中，然后在其中添加要滚动的内容。 知识点2：scroll-into-view...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序的绝对定位或固定定位的弹窗中，如果需要展示可滚动的内容（如列表或长文本），通常需要用到`scroll-view`组件。然而，此时会面临一个问题：无法直接阻止页面本身的滚动。 #### 2.3 解决办法 由于无法...
微信小程序scroll-view实现字幕滚动
01-03
本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码，供大家参考，具体内容如下 需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： demo:字幕滚动 通过控制滑动条来完成字幕滚动，通过...
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
7. **其他属性和事件**：除了上述特性外，`scroll-view`还提供了许多其他属性和事件，如`scroll-top`、`scroll-left`用于设置滚动位置，`scroll-into-view`用于滚动到指定子元素，`@scrollEnd`事件在滚动停止时触发...
jquery滚动效果-无间隙向上滚动
不吃鱼的猫
05-27 3207
第一：html页面 最新动态 数据向上滚动 第二：css样式 .global_module h3{ background:#3b5998; color:#FFFFFF; paddi
间歇性向上无缝滚动（jq插件封装型）
kongjiea笔记
12-27 3447
;(function($){ $.fn.moveUp=function(options){ var defaults = {//初始化参数 moveHeight:30, time:2000 }; var opts =$.extend({},defaults,options);//扩展参数 a=$(this); var top=0;
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 345
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 376
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 169
vue 自定义滚动条同步拖动（移动端）
scroll-view如何提高滚动精度
07-28
要提高 scroll-view 的滚动精度，您可以尝试以下几种方法： 1. 调整 scroll-view 的滚动阈值：scroll-view 组件提供了一个属性叫做 scroll-threshold，可以用来设置滚动事件触发的阈值。通过适当调整这个值，您可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值