zoukankan      html  css  js  c++  java
  • 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(入门篇)无缝滚动

    说明

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

     因为总是有新手们问我这些比较入门的东西所以我干脆写个博客了

    DEMO

  • 相关阅读:
    Radian快速启动程序——利用鼠标快速启动程序
    true launch bar 完美运行版——快速启动工具
    Executor – 快速调出你的程序
    还你清爽桌面!运行精灵软件(快速启动工具)试用测评
    运行精灵视频使用教程
    35个Google开源项目,你知道几个?
    日系精品快速启动程序软件——nrLaunch
    推荐一个快速启动工具——运行精灵(命令搜索型快速启动软件)
    《众智科学》:博弈
    山东大学2021算法期末试题
  • 原文地址:https://www.cnblogs.com/LoveOrHate/p/4425234.html
Copyright © 2011-2022 走看看