在HotStyle主题在集成了右下角弹出最新公告的功能，此功能可以通过后台主题选项轻松开启关闭，现在就其实现方法做以下描述。

这一功能的实现非常简单，其利用jquery的fadeTo或者Hide的功能。

1，加载jquery.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2，加载以下js代码：

<script type="text/javascript">  
    $(document).ready(function() {  
        //$('#sitefocus').hide(0, 0);  
        //$('#sitefocus').fadeIn(1800, 0);  
        $('.bm_h a').click(function() {  
            //$('#sitefocus').hide();  
            //$('#sitefocus').fadeTo(500, 0);  
            $('#sitefocus').hide(600, 0);  
            return false;  
        });  
    });  
</script> 

3，css格式。

<style type="text/css">  
.focus {  
    position:fixed;  
    rightright:5px;  
    bottombottom:5px;  
    z-index:300;  
    overflow:hidden;  
    width:250px;  
    border:1px solid #AAA;  
    padding:0 10px;  
    background:white;  
}  
.bm,.bn {  
    margin-bottom:10px;  
}  
.bm_h {  
    padding:0 10px;  
    height:40px;  
    border-bottom:4px solid #009AD9;  
    line-height:40px;  
    whitewhite-space:nowrap;  
    overflow:hidden;  
}  
.cl {  
    zoom:1;  
}  
.y {  
    float:rightright;  
}  
a {  
    color:#333;  
    text-decoration:none;  
}  
h1,h2,h3,h4,h5,h6 {  
    font-size:1em;  
}  
body,ul,ol,li,dl,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,.pr,.pc {  
    margin:0;  
    padding:0;  
}  
.bm_c {  
    background:white;  
}  
.bbda {  
    border-bottom:1px dashed #CDCDCD;  
}  
.cl {  
    zoom:1;  
}  
.xld dt {  
    padding:8px 0 5px;  
    font-weight:700;  
}  
.bm_c h2 a,.bm_c dt a {  
    padding-right:10px;  
    color:#4A4E52;  
}  
.focus dt a {  
    color:#0060A6;  
    font-size:12px;  
}  
.xi2,.xi2 a,.xi3 a {  
    color:#266CB5;  
}  
.xld dd {  
    margin-bottom:8px;  
}  
.hm {  
    text-align:center;  
}  
.ptn {  
    padding-top:5px!important;  
}  
a:hover,* a:hover {  
    color:#F60 !important;  
}  
</style>

4，php和html代码调用最新公告。

<?php   
     $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 1 ) );while ( $loop->have_posts() ) : $loop->the_post();  
?>  
<div class="focus" id="sitefocus">  
    <div class="bm">  
        <div class="bm_h cl">  
            <a href="http://www.zhuojie.cc/?/web/2012/0223/#" class="y" title="关闭">关闭</a>  
            <h2>临时公告</h2>  
        </div>  
        <div class="bm_c">  
            <dl class="xld cl bbda">  
                <dt>  
                    <a href="http://www.zhuojie.cc/?/web/2012/0223/<?php the_permalink(); ?>" class="xi2" target="_blank">  
                        <?php the_title(); ?>  
                    </a>  
                </dt>  
                <dd>  
                    <?php echo mb_strimwidth(strip_tags(apply_filters( 'the_content', $post->  
                        post_content)), 0, 68,"..."); ?>  
                </dd>  
            </dl>  
            <p class="ptn hm">  
                <a href="http://www.zhuojie.cc/?/web/2012/0223/<?php the_permalink(); ?>" class="xi2" target="_blank">查看 »</a>  
            </p>  
        </div>  
    </div>  
</div>  
<?php endwhile; ?> 

这里循环调用最新公告，由于此公告由主题集成，所以不具有统一性，请根据个人实际需要做修改。

原文地址：http://www.zhuojie.cc/?/html/2227.html