search

Home  >  Article  >  Web Front-end  >  jquery implements simple seamless scrolling_jquery

jquery implements simple seamless scrolling_jquery

WBOY
WBOYOriginal
2016-05-16 16:03:571254browse

jquery implements simple seamless scrolling

<!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() usage: 

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是滚动的速度，可以自己调整

The above is the entire content of this article, I hope you all like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery plug-in star-rating.js implements star rating special effects_jqueryNext article：jquery plug-in star-rating.js implements star rating special effects_jquery

Related articles

See more