jquery實(shí)現(xiàn)簡(jiǎn)單的無縫滾動(dòng)

更新時(shí)間：2015年04月15日 14:15:36 投稿：hebedich

這里給大家分享的是使用jQuery實(shí)現(xiàn)簡(jiǎn)單的無縫滾動(dòng)的效果，其思路是我們通過js控制 ul 標(biāo)簽的margin 來實(shí)現(xiàn)滾動(dòng)。橫向滾動(dòng)則是控制 margin-left ; 縱向滾動(dòng)則是控制 margin-top;，有需要的小伙伴可以參考下。

<!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+EasyUI輕松實(shí)現(xiàn)步驟條效果
jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。通過本文給大家介紹JQuery+EasyUI輕松實(shí)現(xiàn)步驟條效果，需要的朋友參考下
2016-02-02
jQuery操作屬性值方法介紹
這篇文章介紹了jQuery操作屬性值的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
jquery 學(xué)習(xí)之二屬性文本與值(text,val)
jquery 學(xué)習(xí)之二屬性文本與值(text,val)，學(xué)習(xí)jquery的朋友可以參考下。
2010-11-11
jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
jquery實(shí)現(xiàn)隱藏顯示層動(dòng)畫效果、仿新浪字符動(dòng)態(tài)輸入、tab效果等等，以下為所有代碼，感興趣的朋友可以練練手哈，希望對(duì)大家學(xué)習(xí)有所幫助
2013-07-07
input 和 textarea 輸入框最大文字限制的jquery插件
input 和 textarea 輸入框最大文字限制的jquery插件，需要的朋友可以參考下。
2011-10-10
web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印
jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印,不可思議吧，接下來為您介紹它的使用方法及操作步驟，感興趣的朋友可以了解下
2013-01-01
輕松掌握jQuery獲取第二個(gè)子元素集合的技巧！
在這篇指南中,我們將探討如何使用jQuery獲取第二個(gè)子元素集合,如果你正在尋找一種簡(jiǎn)單的方法來快速獲取一個(gè)元素的第二個(gè)子元素,那么你來對(duì)地方了！跟著我們的步驟,你將很快成為一個(gè)jQuery專家,需要的朋友可以參考下
2023-12-12
JQUERY設(shè)置IFRAME的SRC值的代碼
有時(shí)候需要設(shè)置iframe的src屬性，下面是基于jquery的實(shí)現(xiàn)代碼。
2010-11-11
基于jquery實(shí)現(xiàn)下拉框美化特效
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)下拉框美化特效的示例代碼，以一個(gè)完整的實(shí)例進(jìn)行分析講解，感興趣的小伙伴們可以參考一下
2016-02-02
jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
用JavaScript使頁面上的一組checkbox全選/取消全選，邏輯很簡(jiǎn)單，實(shí)現(xiàn)代碼也沒有太難的語法。但使用jQuery實(shí)現(xiàn)則更簡(jiǎn)單，代碼也很簡(jiǎn)潔，精辟！
2009-11-11