WP博客HotStyle主题右下角jquery弹出公告

作者：用户投稿来源：网络发布时间： 14/07/04

以下是网学网为您推荐的网络知识-WP博客HotStyle主题右下角jquery弹出公告，希望本篇文章对您学习有所帮助。

　　在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 id="sitefocus">   
    <div   
        <div cl">   
            <a href="#" title="关闭">关闭</a>   
            <h2>临时公告</h2>   
        </div>   
        <div   
            <dl cl bbda">   
                <dt>   
                    <a href="<?php the_permalink(); ?>" 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 hm">   
                <a href="<?php the_permalink(); ?>" target="_blank">查看 »</a>   
            </p>   
        </div>   
    </div>   
</div>   
<?php endwhile; ?>