zoukankan      html  css  js  c++  java
  • 【小模块】公告滚动并暂停

    话说上回,我们写了个返回页面顶部的小模块,这回我们写一个同样很常见的模块,即公告滚动并暂停模块。公告滚动,最简单的写法是使用maquee标签,这个可以让你内容的内容向上下左右滚动,但是很多高级功能,比如周期性停留无法实现。把周期性停留作为需求,很多网站做了这种公告滚动:

    (截图自谷姐首页)。

    以下呢,咱们也来做一个。

    先把最终演示放出来:

    HTML代码:

    <div class="ann">
    <div class="in">
    <a href="#">公告内容一</a>
    <a href="#">公告内容二</a>
    </div>
    </div>

    CSS代码:

    .ann{ height:20px; line-height:20px; position:relative; overflow:hidden;}
    .in
    { height:20px; line-height:20px; position:absolute; width:300px;}
    .in a
    { height:20px; line-height:20px; display:block;}

    JS代码:

    $(function(){
    annbox();
    });
    function annbox(){
    var distance =20; //移动距离,同.in的height
    var time =3000; //显示停留时间
    var timerock =300; //滚动间隙时间
    $(".in").animate({top:"-"+ distance},timerock,function(){
    $(
    ".in a:first").insertAfter($(".in a:last")); //把滚动到顶部的a移到底部
    $(".in").css("top","0");
    setTimeout(
    "annbox()",time);
    });
    }

    注:小模块系列均基于jQuery,归纳工作中随时做的可重用的小东西

  • 相关阅读:
    hadoop
    常用安装
    rdd相关
    spark安装
    psutil
    scala linux终端高亮显示
    【原创】正则表达式(知识点总结)
    检测对象是否有某个属性(原型链检测和对象自身检测)
    JavaScript核心(对象+原型+函数+闭包+this+上下文堆栈+作用域链)
    JavaScript ES6迭代器指南
  • 原文地址:https://www.cnblogs.com/bienfantaisie/p/1913101.html
Copyright © 2011-2022 走看看