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

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

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

<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="http://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>

放进去之后,老汉推车的左边部分就会以列表显示出博客上的随机文章,当然,这些列表是被右边的搜索框一下一个撞出来的,上面代码中的5即是随机文章的数量。

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

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;}

将上面的css复制到主题simple-m的style.css最下面,并将此style.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}

修改为

#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}

其中实现此功能的核心代码如下

jQuery(document).ready(function(){
	/* “”走马灯效果 by zwwooooo | <a href="http://.me/">http://.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"});
					}
				});
			}
		});
	};
});

可将此代码放置于主题simple-m的head.php里面

随机文章

U盘安装ubuntu linux, 重启后屏幕一直停留在Peter Anvin et al
U盘安装ubuntu linux, 重启后屏幕一直停留在Peter Anvin et al

昨日新书《疯狂Android讲义》到手
昨日新书《疯狂Android讲义》到手

VSC:Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222
VSC:Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

searchpath让你的网站在当前直接显示搜索结果
searchpath让你的网站在当前直接显示搜索结果

sandisk cruzer U盘量产,写入ISO
sandisk cruzer U盘量产,写入ISO

相关文章

百度开放云BAE下周四扩容
百度开放云BAE下周四扩容

一行代码,轻松将浏览器变成临时编辑器
一行代码,轻松将浏览器变成临时编辑器

OPPO N1将于12月10日在美国和欧洲上市
OPPO N1将于12月10日在美国和欧洲上市

新版新浪微博邀请码
新版新浪微博邀请码

内容分享:道招
本文链接:在simple-M主题上添加ZWW的“老汉推车”效果(真实可用)
道招声明:除特别标注或作者不详外,本站所有文章均为原创,转载请注明。欢迎共同关注互联网!