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>

  • 相关阅读:
    tcp socket
    Spring MVC 复习笔记01
    Spring 复习笔记01
    mybatis 复习笔记03
    ActiveMQ实现负载均衡+高可用部署方案(转)
    JVM复习笔记
    JAVA NIO复习笔记
    java IO复习笔记
    并发编程复习笔记
    杂记复习笔记
  • 原文地址:https://www.cnblogs.com/luoxiaolei/p/4938549.html
Copyright © 2011-2022 走看看