链接平移与侧边滑动导航栏

Posted by Harid十月 - 11 - 2010 Leave comments

星期九 这两天按照网络上大牛们的教程分别添加了个侧边栏滑动导航与链接平移的效果,具体效果现已可见 星期九 的左侧上下滑动的快速移动的导航与站里的所有链接。加上之后,我见有些朋友问我是具体怎么做的,于是我就干脆集中帖出来,分享与大家,也省得大家再往别处寻找。结合自:海天无影 万戈,感谢之!

这些效果都是JQuery效果,所以要实现之,必须先加载JQuery库,如果你已加载,请注意“注意”里头的最后一句加红的话。加载方法是在header.php里加入如下一句话:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

注意:如果你觉得你自己的主机速度非常不错,非常稳定,可以不从谷歌的服务器加载该库。将它下载下来,放于自己的空间里,再调用即可。还有就是,如果你的Blog已经加载Wordpress自带的 wp-includes/js/jquery/jquery.js,而且你确定可以用上面的谷歌的jquery.min.js代替的话,那么可以不加载Wordpress自带的这个,因为这个太大了,有72Kb,而谷歌这个才50几Kb。最后要注意的一点是最好是加载上面所写的 1.2.6版本的这个 .js,不要加载 1.3.2版本的,因为据海天测试,貌似高版本没有该效果所需的库。

快速滑动效果添加方法:

1、下载图片:点击下载>>,并将其更名为“huadong.png”上传至你的主题目录的/img目录里;

2、在你的主题所用的 style.css 里添入下面一段样式:

1
2
3
4
#shangxia{position:absolute;top:40%;left:50%;margin-left:-520px;display:block;z-index:2;}
#shang{background:url(img/huadong.png) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(img/huadong.png) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(img/huadong.png) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}

注意:如果第一步中你的主题目录下没有/img目录而是/images目录,你将图片置于/images目录里,则这段CSS样式代码应相应在调用图片的位置改为”/images/huadong.png”。

3、在你主题的 header.php里的</head>标签前面(最好紧帖该标签,因为必须先加载JQuery库)加入下述代码。该代码的作用是让图标中间的“评”只出现在单篇文章里,即隐藏首页点击滑至“评论”位置的功能,因为像首页、留言页、归档页等有些页面并没有评论或者像留言页因为作者叙述部分本来就很短,不必要滑动至评论部分,所以隐藏掉,具体见 星期九归档页留言页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php if (is_single()) { ?>
<br />
<div id="shangxia">
<div id="shang"></div>
<div id="comt"></div>
<div id="xia"></div>
</div>
<p>
<?php } else { ?>
<br />
<div id="shangxia">
<div id="shang"></div>
<div id="xia"></div>
</div>
<p>
<?php } ?>

4、在你的主题调用的 JS 文件中或者你干脆新建一个 .js 文件,在其中加入下述代码:

1
2
3
4
5
6
7
8
9
jQuery(document).ready(function($){
	var s= $('#shangxia').offset().top;
	$(window).scroll(function (){
		$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});
	});
	$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
	$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
	$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
});

然后确保在 header.php 有加载这个 .js文件即可。至此,应该就可以启用这个效果了。如果没有即时显示,有可能是缓存的原因,如果你装有 WP-Super-Cache 这类缓存页面的插件,需要先删除缓存。如果没有该类插件,请尝试按 “Ctrl+F5”来刷新浏览器缓存。

.

全站链接平移效果添加方法

首先要确保已经加载文章开关所说的JQuery库。

1、在所用主题的 style.css 文件里添加一句(这是全站链接应用,如果只想部分链接应用,于其前面加入其它控制符):

1
a{position:relative;}

2、在主题所调用的 .js文件里也就是上一个效果里说到的 .js文件里加入:

1
2
3
4
5
6
7
jQuery(document).ready(function($){
	$('a').hover(function() {
		$(this).stop().animate({'left': '5px'}, 'fast');
	}, function() {
		$(this).stop().animate({'left': '0px'}, 'fast');
	});
});

我将这两个效果合并在了一起:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
jQuery(document).ready(function($){
	var s= $('#shangxia').offset().top;
	$(window).scroll(function (){
		$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});
	});
	$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
	$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
	$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
	$('a').hover(function() {
		$(this).stop().animate({'left': '5px'}, 'fast');
	}, function() {
		$(this).stop().animate({'left': '0px'}, 'fast');
	});
});

你也可以将其合并在一起。

至此,两个效果均已添加,上传文件即可。

   声明:本文采用 BY-NC-SA 协议进行授权 | 星期九
   原创文章转载请注明:转自《链接平移与侧边滑动导航栏

    • @J.C., 没有,你搜一下,有些合并图片的软件的,用Photoshop也可以,一般就是用其它软件做也还是需要Photoshop处理。

  1. 弱弱的问一下,我不想让文章中的图片有这个滑动效果,我应该怎么改,详细点,我对这方面不懂,谢谢回答~~
    a{position:relative;} 添加什么属性呢?

  2. Pingback: 随便折腾了一下 » Lazywen WordPress Unknow Os

  3. 我也是inove主题正好需要这个。 不过我喜欢放在右边。今天折腾啊可能看。


分享按钮