道招

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

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

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

看着主题导航栏下面的一截空白,我就想,咱不能让他空着啊,这是想起了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精美主题simple-m下一篇:解决本站wordpress中文标签tag无法打开、无法伪静态问题

相关文章

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了