jquery(入門篇)無縫滾動

時間  2019-11-13
標籤 jquery 入門 無縫 滾動 欄目 JQuery 简体版
原文   原文鏈接 
<!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>
</body>
</html>
<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>

jquery(入門篇)無縫滾動javascript

 

說明css

    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是滾動的速度，能夠本身調整

 

 由於老是有新手們問我這些比較入門的東西因此我乾脆寫個博客了html

DEMOjava

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程