广告
淘宝内部优惠券
当前位置: 开发异常方案库» Web 开发 » JQ的无限上下滚动问题

JQ的无限上下滚动问题

开发异常方案库  收集整理于:2020-05-27 15:41:00  浏览:66次
附上代码  看到 网上一段代码 但是是从下往上的 现在想改成从上往下  试了好久都成功 求助各位大神啦 谢谢 <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>   <style> #ontime{ width: 50vw; height: 55vh; } .tu-title{ background: #1488CC;  /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #061C93,#1935A2, #000e4A);  /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #061C93,#1935A2, #000e4A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ /* background-color: aqua; */ /* height: 3.7vh; */ width: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 1.1vw; font-weight: 600; } .tu-title>span{ background: linear-gradient(to right, #0052D4, #99ffff); -webkit-background-clip: text; color: transparent; } #info-list{ background-color: #66B3FF; } #title{ width: 100%; height: 5vh; display: flex; flex-direction: row; justify-content: center; align-items: center; } .biao5-title{ width: 20%; height: 5vh; display: flex; flex-direction: row; justify-content: center; align-items: center; color:#fff; font-size: 0.85vw; font-weight: 500; } #con{ width: 100%; height: 30vh;  overflow: hidden; text-align: center; } #con>ul{ width: 100%; height: 4.4vh; list-style: none; padding: 0; margin: 0; } #conn>li{ width: 100%; height: 4.4vh; display: flex; flex-direction: row; justify-content: center; align-items: center; } .info-text{ width: 20%; height: 4.4vh; display: flex; flex-direction: row; justify-content: center; align-items: center; } </style> </head> <body> <div id="ontime"> <div class="tu-title"><img src="../header1.jpg" alt=""></div> <div id="info-list"> <!-- <div id="title"> <div class="biao5-title" id="title-info">商户名称</div> <div class="biao5-title" id="title-info">过磅时间</div> <div class="biao5-title" id="title-info">品类</div> <div class="biao5-title" id="title-info">重量(kg)</div> <div class="biao5-title" id="title-info">金额(¥)</div> </div> --> <div id="con"> <ul id="conn"> <li> <div id="info-user" class="info-text">1</div> <div class="info-text">2</div> <div class="info-text">3</div> <div class="info-text">4</div> <div class="info-text">5</div> </li> <li> <div id="info-user" class="info-text">6</div> <div class="info-text">7</div> <div class="info-text">8</div> <div class="info-text">9</div> <div class="info-text">10</div> </li> <li> <div id="info-user" class="info-text">11</div> <div class="info-text">12</div> <div class="info-text">13</div> <div class="info-text">14</div> <div class="info-text">15</div> </li> <li> <div id="info-user" class="info-text">16</div> <div class="info-text">17</div> <div class="info-text">18</div> <div class="info-text">19</div> <div class="info-text">20</div> </li> <li> <div id="info-user" class="info-text">21</div> <div class="info-text">22</div> <div class="info-text">23</div> <div class="info-text">24</div> <div class="info-text">25</div> </li> <li> <div id="info-user" class="info-text">26</div> <div class="info-text">27</div> <div class="info-text">28</div> <div class="info-text">29</div> <div class="info-text">30</div> </li> </ul> </div> </div> </div> </body>   <script type="text/javascript"> function timer(opj){ $(opj).find('ul').animate({ marginTop : "-4.4vh"   },500,function(){   $(this).css({marginTop : "0vh"}).find("li:first").appendTo(this);   })   } //悬停时停止滑动,离开时继续执行 $(function(){    let mit=setInterval('timer("#con")',2000); $('#conn').children("li").hover(function(){ clearInterval(mit); //清除自动滑动动画 },function(){ mit = setInterval('timer("#con")',2000); //继续执行动画 }) }); </script> </html>

------网友观点--------------------
		function timer(opj){
					$(opj).find('ul').animate({
						marginTop : "4.4vh"  
					},500,function(){  
						$(this).css({marginTop : "0vh"}).find("li:last").prependTo(this);  
					})  
		}
发布此文章仅为传递网友分享,不代表本站观点,若侵权请联系我们删除,本站将不对此承担任何责任。
软件开发 程序错误 异常 ybaby.netCopyright © 2020-2026  ybaby 版权所有  桂ICP备17004385号-2 网站地图