zoukankan      html  css  js  c++  java
  • jquery实现公告上下滚动显示

    js:

    // JavaScript Document
    function b(){
    t = parseInt(x.css('top'));
    y.css('top','19px');
    x.animate({top: t - 19 + 'px'},'slow'); //19为每个li的高度
    if(Math.abs(t) == h-19){ //19为每个li的高度
    y.animate({top:'0px'},'slow');
    z=x;
    x=y;
    y=z;
    }
    setTimeout(b,3000);//滚动间隔时间 现在是3秒
    }
    $(document).ready(function(){
    $('.swap').html($('.news_li').html());
    x = $('.news_li');
    y = $('.swap');
    h = $('.news_li li').length * 19; //19为每个li的高度
    setTimeout(b,2000);//滚动间隔时间 现在是3秒

    })

    css:

    *{ padding:0; margin:0; font-size:12px}
    ul,li{ list-style:none;}
    .box{ height:35px; background:#000; overflow:hidden;}
    .t_news{ height:19px; background:url(../images/icon_top.png) 0 -88px no-repeat; color:red; padding-left:10px; margin:8px 0; overflow:hidden; position:relative;}
    .t_news b{ line-height:19px; font-weight:bold; display:inline-block;}
    .news_li,.swap{ line-height:19px; display:inline-block; position:absolute; top:0; left:72px;}
    .news_li a,.swap a{ color:red;}
    .swap{top:19px;}

    html:

    <div class="t_news">
    <b>网站公告:</b>
    <ul class="news_li">
    <li><a href="#" target="_blank">要显示的内容</a></li>
    </ul>
    <ul class="swap"></ul>
    </div>

  • 相关阅读:
    owncloud7.0.2.1升级8.0.3
    iptables删除规则
    ESXi Install OpenWRT
    Eclipse连接VirtualBox中的Android x86
    win7、linux安装使用pip、mitmproxy
    linux php bom
    ios项目上传svn丢失*.a文件
    升级owncloud到7.0.2
    phpinfo有mysqlnd没有mysql
    Cacti监控Centos抓包unreachable
  • 原文地址:https://www.cnblogs.com/luoxiaolei/p/4938549.html
Copyright © 2011-2022 走看看