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

  • 时间:
  • 浏览:1
  • 来源:5分PK10_5分PK10网投平台_5分PK10投注平台_5分PK10娱乐平台
作者:匿名 hihi 来源:张自云的博客 浏览: 2012-3-1 17:48:14 字号:大 中 小

[摘要]WordPress在HotStyle主题下集成了右下角弹出最新公告的功能,此功能要能要能通前一天台主题选项轻松开启关闭,你一点功能的实现非常简单,实在也不利用jquery的fadeTo可能Hide的功能。

  在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(14000, 0);

$('.bm_h a').click(function() {

//$('#sitefocus').hide();

//$('#sitefocus').fadeTo(4000, 0);

$('#sitefocus').hide(4000, 0);

return false;

});

});

</script>

3、css格式。

<style type="text/css">   

.focus {

position:fixed;

rightright:5px;

bottombottom:5px;

z-index:400;

overflow:hidden;

width:2400px;

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:#00400A6;

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:#F400 !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="#" class="y" title="关闭">关闭</a>

<h2>临时公告</h2>

</div>

<div class="bm_c">

<dl class="xld cl bbda">

<dt>

<a href="<?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="<?php the_permalink(); ?>" class="xi2" target="_blank">查看 »</a>

</p>

</div>

</div>

</div>

<?php endwhile; ?>

  这里循环调用最新公告,可能此公告由主题集成,全都 不具有统一性,请根据我每人个实际前要做修改。

Wordpress下载:

原文地址:http://www.icdiary.com/html/2227.html

sssss
Tags: WordPress主题   WordPress教程   HotStyle   jquery弹出公告  
责任编辑:cc120