jquery實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫滾動(dòng)
jquery實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫滾動(dòng)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> </head> <style> *{ margin: 0px; padding: 0px;} li{ list-style: none;} .content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; } .content ul{ width: 1020px; height:100px;} .content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;} </style> <body> <div class="content"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> </ul> </div> <script> function scroll(){ $(".content ul").animate({"margin-left":"-110px"},function(){ $(".content ul li:eq(0)").appendTo($(".content ul")) $(".content ul").css({"margin-left":0}) }) } setInterval(scroll,1000) </script> </body> </html>
scroll()用法:
function scroll(){ $(".content ul").animate({"margin-left":"-110px"},function(){ //這個(gè)是讓整個(gè)ul先向前滑動(dòng)個(gè)li ,如果要一次性滑動(dòng)5個(gè)~那么就是550px. //想向上滾動(dòng)就改成 $(".content ul").animate({"margin-top":"-105px"} //想向下滾動(dòng)就改成 $(".content ul").animate({"margin-top":"105px"} //想向右滾動(dòng)就改成 $(".content ul").animate({"margin-left":"110px"} $(".content ul li:eq(0)").appendTo($(".content ul")) $(".content ul").css({"margin-left":0}) //對(duì)應(yīng)這的這邊 //想向上滾動(dòng)就改成 $(".content ul").animate({"margin-top":0} //想向下滾動(dòng)就改成 $(".content ul").animate({"margin-top":0} //想向右滾動(dòng)就改成 $(".content ul").animate({"margin-left":0} }) } setInterval(scroll,1000) //這上面的是1000是滾動(dòng)的速度,可以自己調(diào)整
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery Ajax實(shí)現(xiàn)跨域請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax實(shí)現(xiàn)跨域請(qǐng)求的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01jquery實(shí)現(xiàn)動(dòng)態(tài)改變div寬度和高度
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)改變div寬度和高度,效果非常不錯(cuò),而且兼容性也很好,有需要的小伙伴可以參考下。2015-05-05jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素的相關(guān)資料,需要的朋友可以參考下2015-01-01jQuery在ie6下無(wú)法設(shè)置select選中的解決方法詳解
這篇文章主要介紹了jQuery在ie6下無(wú)法設(shè)置select選中的解決方法,結(jié)合實(shí)例分析了jQuery在ie6下無(wú)法設(shè)置select選中的原因與相關(guān)處理技巧,需要的朋友可以參考下2016-09-09JavaScript對(duì)象之間的轉(zhuǎn)換 jQuery對(duì)象和原聲DOM
jQuery對(duì)象和原聲DOM,JavaScript對(duì)象之間的轉(zhuǎn)換,學(xué)習(xí)jquery的朋友可以參考下。2011-03-03jQuery實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)贊效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)贊效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01jQuery在iframe中無(wú)法彈出對(duì)話框的解決方法
如果在iframe中使用則彈不出對(duì)話框,而有時(shí)候我們還必須得使用iframe而不能用jQuery的load方式,下面有個(gè)不錯(cuò)的處理方法,希望對(duì)大家有所幫助2014-01-01jQuery實(shí)現(xiàn)圖片加載完成后改變圖片大小的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片加載完成后改變圖片大小的方法,結(jié)合實(shí)例形式分析了jQuery圖片樣式與頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03