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

posted @   一点点白  阅读(6352)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示