看着主题导航栏下面的一截空白,我就想,咱不能让他空着啊,这是想起了ZWW的“老汉推车”,那么把这个效果放在这个位置,不是正适合?其实刚开始看到这个撞击棍的时候,我就曾在zbench主题上试过,无奈水平有限,弄不正好。今天再次想起来,就决定要弄好它,弄不正好,也得弄个差不多好吧!

开始弄了,根据ZWW的说明,我把那一段html div放在了头部文件中的菜单DIV中,发现不行,就干脆放在了菜单的下面,把菜单原来的margin:40px直接改成0,把撞击棍的高度改成了40,这样刚好替换掉原来一段空白,那段空白就是菜单DIV的下部内填充; 这样直接替换也不影响那一条加载进度条的位置,这样就避免去更改它的CSS。

位置放好了,内容放什么呢?ZWW的老汉推车的撞击棍是搜索框,那咱也把搜索框放进去,由于主题的侧边栏上内置了搜索框,于是便把它剪切过来,对照着改了样式,老汉的棍算是OK啦;那么被老汉的棍撞了以后会出来什么呢?这个咱得自己决定啊,想来想去想不出放,那干脆在这里显示随机文章吧,于是GG一把,找到了一段随机文章的代码:

[code lang="css"]
<div id="notice_wrap">
<div id="notice"><ul><?php$rand_posts = get_posts('numberposts=10&orderby=rand');foreach( $rand_posts as $post ) ?><!--下面是你想自定义的Loop--><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul> <p id="prev">&laquo;</p>
<p id="next">&raquo;</p>
</div>
<div id="search"><form method="get" id="searchform" action="https://www.daozhao.com/">
<input type="text" value="输入内容按Enter" name="s" id="s" onfocus="this.value = this.value == this.defaultValue ? '' : this.value" onblur="this.value = this.value == '' ? this.defaultValue : this.value"/>
</form></div>[/code]
放进去之后,老汉推车的左边部分就会以列表显示出博客上的随机文章,当然,这些列表是被右边的搜索框一下一个撞出来的,上面代码中的5即是随机文章的数量。

保存文件后,在电脑里面装的所有浏览器上试了一下,还行,就让他先慢慢的撞着吧!

css参考
[code lang="css"]/* #notice_wrap */
#notice_wrap{position:relative;width:700px;height:50px;margin:0 auto;border:1px solid #ddd;}
/* #notice */
#notice{overflow:hidden;position:absolute;top:0;left:0;width:500px;height:50px;}
#notice ul{position:absolute;width:1000px;}
#notice ul li{overflow:hidden;list-style:none;float:left;width:470px;height:50px;line-height:50px;margin-left:15px;padding-right:14px;border-right:1px solid #ddd;}
#prev,#next{display:none;cursor:pointer;position:absolute;top:0;width:15px;height:50px;line-height:50px;text-align:center;color:#777;}
#prev{left:0;}
#next{right:0;}
/* #search */
#search{overflow:hidden;position:absolute;top:12px;right:15px;width:170px;height:24px;line-height:24px;text-align:center;background:#fff;border:1px solid #ddd;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;}[/code]
将上面的css复制到主题simple-m的style.css最下面,并将此style.css里面的
[code lang="css"]#menu{width:960px;margin:10px auto<span style="color: #ff0000;"> 40px</span>;border:1px solid #aaa;-webkit-box-shadow:#ccc 0 0 5px;-moz-box-shadow:#CCC 0 0 5px;box-shadow:#CCC 0 0 5px;background:#FFF;height:35px}[/code]
修改为
[code lang="css"]#menu{width:960px;margin:10px auto <span style="color: #0000ff;">0px</span>;border:1px solid #aaa;-webkit-box-shadow:#ccc 0 0 5px;-moz-box-shadow:#CCC 0 0 5px;box-shadow:#CCC 0 0 5px;background:#FFF;height:35px}[/code]
其中实现此功能的核心代码如下
[code lang="php"]jQuery(document).ready(function(){
/* “老汉推车”走马灯效果 by zwwooooo | <a href="http://zww.me/">http://zww.me</a> */
var $notice=$('#notice'), //选择器赋值
$prev=$('#prev'),
$next=$('#next'),
$search=$('#search'),
myScroll=setInterval(notice,4000); //每4秒循环
$next.click(function(){ //点击向右翻
var $first=$notice.find('li:first');
$first.remove();
$notice.find('li:last').after($first);
});
$prev.click(function(){ //点击向左翻
var $last=$notice.find('li:last');
$last.remove();
$notice.find('li:first').before($last);
});
$notice.hover(function(){ //鼠标hover时停止动画 + 显示翻页按钮
clearInterval(myScroll);
$prev.show();
$next.show();
},function(){
myScroll=setInterval(notice,4000);
$prev.hide();
$next.hide();
});
function notice(){ //老汉推车效果函数
var first=$notice.find('li:first'),
width=-(first.outerWidth(true))+'px';
$search.animate({right:'28px'},{ //注意这个14px值,通常是搜索框中right值+搜索框距离左边撞击线的距离(看css)
duration:400,complete:function(){
$search.animate({right:'14px'},400); //14px为搜索框原来的right值(看css)
$notice.find('li').css({"border-color":"#999"});
$notice.children('ul').animate({left:width},{
duration:1200,complete:function(){
$notice.children('ul').append(first).css("left","0");
$notice.find('li').css({"border-color":"#ddd"});
}
});
}
});
};
});[/code]
可将此代码放置于主题simple-m的head.php里面

分类: WordPress

9 条评论

心语聆听 · 2011/09/06 21:15

啊~~~还是不会啊!!可以把教教我么?具体怎么修改,我是初学者,php也是半吊子....唉.... ➡ ➡ ➡ ➡

[回复]

普若木特 回复:

@心语聆听, 行啊,要不你联系我QQ吧,那样快点。QQ: 100177553

[回复]

心语聆听 · 2011/09/06 17:12

正在学习,想把这个特效加在我的网站上,真漂亮的!!

[回复]

普若木特 回复:

@心语聆听, 我去你网站看了下,还没添加啊。

[回复]

心语聆听 回复:

@i, 习武电脑有些问题,重装了系统,然后就按照你的教程来做,但是不知道是哪儿的问题,修改后就不能显示首页了。。。jQuery代码应该放在那里呢??

[回复]

普若木特 回复:

@心语聆听, 放在当前主题的header.php前面的“ < ?php wp_head(); ?>”后面就行了,本站就是这么放的。

[回复]

心语聆听 回复:

@i, 谢谢博主了,我今天做成功了!感谢博主的帮助!!!! :gl: :gl: :gl: :gl: :gl:

[回复]

普若木特 回复:

@心语聆听, 恭喜你了,互帮互助是应该的,做网站坚持就是胜利,一起努力吧。 :mrgreen:

普若木特 · 2011/05/15 08:33

有意思哦

[回复]

发表评论

电子邮件地址不会被公开。 必填项已用*标注