$(function(){?var $area = $('#content');?var $con1 = $('#con1');?$area.scrollTop = 0;?var myScroll = setInterval('myAnimate()',1000);?function myAnimate(){?????????? $area.animate({????????????? scrollTop:'$con1[0].scrollHeight()'?????}),'slow',function(){????????????if($area.scrollTop >= $con1[0].scrollHeight){???????$area.scrollTop = 0;??????}else{???????? $area.scrollTop++;???????? };??????};??????????????? };?$area.hover(function(){??clearInterval(myScroll);??},function(){???myScroll = setInterval('myAnimate()',1000);???});????})
2 回答
已采納
OlderSkee
TA貢獻(xiàn)123條經(jīng)驗(yàn) 獲得超103個(gè)贊
$(function () {
? ?var timer = null;
? timer = ?setTimeout(auto,20)
? ?function auto(){
? ? ? ?clearTimeout(timer)
? ? ? ?$("#con1").css({"marginTop":"-=1px"})
? ? ? ?if(parseInt($("#con1").css("marginTop"))<-249){ ?//這里其實(shí)有一像素的偏差，修正一下
? ? ? ? ? ?$("#con1").css("marginTop",100);
? ? ? ?}
? ? ? ?setTimeout(auto,20)
? ?}
})//無(wú)縫只需要加上這一句就可以了。
for(var i=0;i<4;i++){
? ?$("#con1").append($("#con1 li").eq(i).clone(true))
}
-
雞肋2016非常感謝您的回答??！我之前一直用animate()、定時(shí)器、scrollTop在弄，您給了我新的思路，但是您的代碼不能實(shí)現(xiàn) 無(wú)縫滾動(dòng)呀 還是得克隆一個(gè)con2吧 但還是得感謝您 好人啊哈哈哈！ -
OlderSkee嗯是的呀， 深度克隆下就行了 用for循環(huán)4次，我改了下這個(gè)代碼，你再看下就知道了~
-
雞肋2016哈哈哈 太感謝你了 您的方法簡(jiǎn)單又好用，但你給的margin-top<-249和100是有一點(diǎn)出入的，我發(fā)現(xiàn)只要 第一個(gè)值（-249）和第二個(gè)值（100）只要相加等于-225（我有9個(gè)li,每個(gè)li高25，得225）就能無(wú)縫滾動(dòng) ，比如 （-225）和（0），太開心了！謝謝您??！謝謝！
點(diǎn)擊展開后面2條
-
雞肋2016好的 我黏貼一下 代碼有點(diǎn)多 html css肯定沒問(wèn)題 js我也可以實(shí)現(xiàn) 就是JQ我不太會(huì) 麻煩您給看下 謝謝謝?。?/div>
雞肋2016<div id="warp"> <div class="header"> <div class="header_one"> <h1 class="title">最新課程</h1> <a href="#">更多>></a> </div> <div class="header_tip"></div> </div> <div id="content"> <ul id="con1"> <li><a href="#">1.學(xué)會(huì)html5 絕對(duì)的屌絲逆襲（案例）</a><span>2013-09-18</span></li> <li><a href="#">1.學(xué)會(huì)html5 絕對(duì)的屌絲逆襲（案例）</a><span>2013-09-18</span></li> <li><a href="#">2.tab頁(yè)面切換效果（案例）</a><span>2013-10-09</span></li> <li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分頁(yè)頁(yè)碼制作（案例）</a><span>2013-11-06</span></li> <li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li> </ul> <ul id="con2"></ul> </div> </div>
雞肋2016*{ padding:0; margin:0; } #warp{ width:400px; height:200px; border:4px solid #ccc; margin:0 auto; } .header{ width:400px; height:60px; background:#C33; } .header_one{ width:400px; height:50px; color:#fff; float:left; } .header h1{ margin:10px 0 0 10px; display:inline-block; } .header a{ float:right; margin:30px 10px 0 0; color:#fff; text-decoration:none; } .header_tip{ width:400px; height:10px; float:left; background:#fff; } #content{ width:400px; height:110px; overflow:hidden; } #con1,#con2{ margin:0 auto; width:300px; list-style-type:none; font-size:10px; } #con1 li,#con2 li { height:25px; line-height:25px; } #con1 li a,#con2 li a{ color:#000; text-decoration:none; } #con1 li span,#con2 li span{ color:#999; float:right; }點(diǎn)擊展開后面1條
添加回答
舉報(bào)
0/150
提交
取消