随屏滚动弹出公告。
支持随屏滚动。样式可自定义。
效果预览见本次弹出公告。
关闭

最新公告

本公司原定每周五下午的客户培训自即日起调整至每周二下午13:30。参加培训请提前致电:62579920预约。
代码
1.在body里加入如下HTML代码:

<div id="sl_popup" class="sl_popupBG">
    <div class="sl_popupContent">
        <div class="sl_popupClose">
            <img border="0" onclick="document.getElementById('sl_popup').style.display='none'"
                alt="关闭" src="images/ba-close.gif">
        </div>
        <h3>
            最新公告</h3>
        <div class="detailcontent">
            本公司原定每周五下午的客户培训自即日起调整至每周二下午13:30。参加培训请提前致电:62579920预约。
         </div>
        <div class="detaillink">
            <a target="_blank" href="#">详细信息>></a>
        </div>
    </div>
</div>

2.在head标签内加入css文件:

<style type="text/css">
    *{margin:0; padding:0;}/* 如果已经重置样式,此行代码可以不加 */
    .sl_popupBG
    {
        height: 230px;
        width: 394px;
        background: url(images/beian-popup.png) no-repeat;
        position: relative;
        z-index: 1000;
        margin:0 auto;
    }
    .sl_popupContent
    {
        font-family: Arial,Verdana,Helvetica,sans-serif, '宋体';
        font-size: 14px;
        line-height: 23px;
        padding: 10px 35px 0 28px;
    }
    .sl_popupClose
    {
        position: absolute;
        right: 25px;
        top: 16px;
        font-size: 0;
        cursor: pointer;
    }
    .sl_popupContent h3
    {
        color: #FF6600;
        font-size: 14px;
        font-weight: bold;
        height: 46px;
        line-height: 49px;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .sl_popupContent .detailcontent
    {
        color:#6F757D;
        font-size:12px;
        text-indent:2em;
        text-align:justify;
        height:110px;
    }
    .sl_popupContent .detaillink
    {
        padding-top: 3px;
        font-family: '宋体';    
    }
    .sl_popupContent .detaillink a
    {
        color: #559100;
        font-size: 12px;
        font-weight: bold;
        text-decoration: none;
    }
    .sl_popupContent .detaillink a:hover
    {
        color: #ff6600;
        text-decoration:underline;
    }
</style>

3.在head里引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.scrollfollow.js" type="text/javascript"></script>

4.继续在head里加入js代码:

<script type="text/javascript">
    $(function() {
       $('#sl_popup').scrollFollow({
           speed: 800,//滚动的速度,可以自己调整
            offset: 200 //公告位置的偏移,可以自己调整
        });
    })
</script>

5.此公告背景用了png格式的图片,为了兼容IE6,在head最后加上如下js代码:

<!--[if IE 6]>
<script type="text/javascript" src="http://img.china-dirs.com.cn/public/js/DD_belatedPNG_0.0.8a-min.js" >
</script>
<script type="text/javascript">DD_belatedPNG.fix('.sl_popupBG');</script>
<![endif]-->