jQuery 間歇的無縫滾動

admin發表於2019-01-22
jQuery

本章節分享一段程式碼例項，它實現了帶有間歇的水平無縫滾動效果。

下面就通過程式碼例項介紹一下如何實現此功能，並且詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<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;
  text-align:center;
  line-height:100px;
  border:#ccc solid 1px;
  display:block;
  margin:5px;
  color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  function scroll(){
    $(".content ul").animate({"margin-left":"-110px"},function(){
      $(".content ul li:eq(0)").appendTo($(".content ul"));
      $(".content ul").css({"margin-left":0});
    })
    setTimeout(scroll,1000)
  }
  scroll();
});
</script>
</head> 
<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>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){}）,當文件結構載入完畢再去執行函式中的程式碼。

（2）.function scroll(){}，此函式是實現滾動的核心，後面會詳細註釋。

（3）.$(".content ul").animate({"margin-left":"-110px"},function(){

  $(".content ul li:eq(0)").appendTo($(".content ul"));

  $(".content ul").css({"margin-left":0});

})，{"margin-left":"-110px"}，以動畫方式設定ul元素的margin-left屬性值，這樣就是先了向左移動的效果。

function(){}，這是一個回撥函式，也就是動畫完成後要執行的函式。

$(".content ul li:eq(0)").appendTo($(".content ul"))，將原來的第一個li元素放到ul的最後。

$(".content ul").css({"margin-left":0}),重新將ul的margin-left設定為0。

（4）.setTimeout(scroll,1000)，一秒鐘後執行scroll函式，這裡採用的是遞迴的方式，實現了不斷的執行。

二.相關閱讀:

（1）.animate()參閱jQuery animate()一章節。

（2）.:eq()參閱jQuery :eq()一章節。

（3）.appendTo()方法參閱jQuery appendTo()一章節。

（4）.css()方法參閱jQuery css()一章節。

（5）.setTimeout()參閱setTimeout()一章節。

相關文章