公告栏翻滚显示 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
	<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body{font-size: 14px;font-family: "yahei";}
        a {
            text-decoration: none;
        }
        .clearfix{*zoom:1;}
        .clearfix:after,.clearfix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
        .fl{float:left;}
        .fr{float:right;}
        /* 公告 */
        .notice-zb{
            width:1190px;
            height:60px;
            margin:50px auto;
            background: #f9f9f9;
            line-height: 60px;
            overflow:hidden;
            color:#5e0000;
            font-size: 14px;
        }
        .notice-zb .imgtxt{
            display: inline-block;
            width:132px;
        }
        .notice-zb img.naba{
            display: inline-block;
            width: 29px;
            height: 25px;
            margin:0px 12px 0 20px;
        }
        .notice-zb ul{
            height:100%;
            display: inline-block;
            width:1045px;
            padding-right:8px;
        }
        .notice-zb ul li{
            width:100%;
            height:100%;
            line-height: 60px;
        }
        .notice-zb ul li a{
            color:#5e0000;
        }
        .notice-zb ul li a:hover{
            /*text-decoration: underline;*/
            color:#d71326;
        }
    </style>
</head>
<body>
<!-- 公告 -->
<div class="notice-zb ">
    <span class="imgtxt fl"><img class="naba" src="" alt="">公告信息：</span>
    <ul class="fl">
        <li class="clearfix">1.查询模块菜单名称更新公告<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/19</span></li>
        <li class="clearfix">2.新旧名称对照表<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/20</span></li>
        <li class="clearfix">3.新旧名称对照表<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/20</span></li>
    </ul>
</div>
<script>
    //公告滚动
    (function(){
        var timer;
        auto();
        function auto(){
            timer = setInterval(function(){
                var oUl = $('.notice-zb ul');
                var aLi = oUl.find('li');
                var oHeight =  aLi.eq(0).height();
                oUl.animate({'marginTop':-oHeight + 'px'},500,function(){
                    oUl.css('marginTop','0px').find('li:first').appendTo(oUl);
                });
            },3000);
        }
        $('.notice-zb').mouseenter(function(){
            clearInterval(timer);
        }).mouseleave(function(){
            auto();
        });
    })();
</script>
	
</body>
</html>

不过这种写法当页面长期打开时，会有bug！　　

posted @ 2017-04-20 14:58  front-gl  阅读(184)  评论(0)    收藏  举报