在simple-M主题上添加ZWW的“老汉推车”效果(真实可用)

看着主题导航栏下面的一截空白,我就想,咱不能让他空着啊,这是想起了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="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>

放进去之后,老汉推车的左边部分就会以列表显示出博客上的随机文章,当然,这些列表是被右边的搜索框一下一个撞出来的,上面代码中的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里面

9 thoughts on “在simple-M主题上添加ZWW的“老汉推车”效果(真实可用)”

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

    [回复]

    普若木特 回复:

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

    [回复]

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

    [回复]

    普若木特 回复:

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

    [回复]

    心语聆听 回复:

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

    [回复]

    普若木特 回复:

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

    [回复]

    心语聆听 回复:

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

    [回复]

    普若木特 回复:

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

发表评论

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