cari

Rumah >hujung hadapan web >tutorial js >jquery melaksanakan scrolling_jquery yang lancar

jquery melaksanakan scrolling_jquery yang lancar

WBOY
WBOYasal
2016-05-16 16:03:571291semak imbas

jquery melaksanakan penatalan lancar yang mudah

<!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>

penggunaan tatal(): 

function scroll(){
   $(".content ul").animate({"margin-left":"-110px"},function(){
   //这个是让整个ul先向前滑动个li ,如果要一次性滑动5个~那么就是550px.
  //想向上滚动就改成 $(".content ul").animate({"margin-top":"-105px"}
  //想向下滚动就改成 $(".content ul").animate({"margin-top":"105px"}
  //想向右滚动就改成 $(".content ul").animate({"margin-left":"110px"}
     $(".content ul li:eq(0)").appendTo($(".content ul"))
     $(".content ul").css({"margin-left":0})
  //对应这的这边
  //想向上滚动就改成 $(".content ul").animate({"margin-top":0}
  //想向下滚动就改成 $(".content ul").animate({"margin-top":0}
  //想向右滚动就改成 $(".content ul").animate({"margin-left":0}
   })
   }
    setInterval(scroll,1000)
  //这上面的是1000是滚动的速度，可以自己调整

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery plug-in star-rating.js melaksanakan penarafan bintang special effects_jqueryArtikel seterusnya：jquery plug-in star-rating.js melaksanakan penarafan bintang special effects_jquery

Artikel berkaitan

Lihat lagi