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

Posted by Harid十月 - 11 - 2010 Leave comments   607 views 

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

这些效果都是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 协议进行授权 | 星期九
   原创文章转载请注明：转自《链接平移与侧边滑动导航栏》

分享本文： 腾讯微博 QQ空间 人人网 百度空间 开心网 新浪微博 Google Reader 豆瓣
Comments(96) Leave comments
  1. Gravatar
    J.C. Google Chrome Google Chrome 15.0.874.120 Windows Windows 7
    十一月 18th, 2011 at 12:30  | #1
    Reply

    哈感谢。另外你合并图片是用插件的吧？

    • Gravatar Harid  @  十一月 18th, 2011 at 12:53 replied.
      Reply

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

  2. Gravatar
    J.C. Google Chrome Google Chrome 15.0.874.120 Windows Windows 7
    十一月 18th, 2011 at 12:08  | #2
    Reply

    你那个侧边滑动的图能不能给我copy一份？

    • Gravatar Harid  @  十一月 18th, 2011 at 12:21 replied.
      Reply

      @J.C., 如果有的话我肯定会给你的，不过我把这图做成了一张大图了，地址是：http://pic.yupoo.com/harid/BkCsl9z0/11x7qY.png，我好像没有备份。

    • Gravatar Harid  @  十一月 18th, 2011 at 12:29 replied.
      Reply

      @J.C., 找了一下，还真给找着了，给你个地址吧：http://www.ninthday.net/wp-content/themes/halo/img/merged/huadong.png

  3. Gravatar
    J.C. Google Chrome Google Chrome 15.0.874.120 Windows Windows 7
    十一月 18th, 2011 at 11:14  | #3
    Reply

    文中下载链接已经失效

    • Gravatar Harid  @  十一月 18th, 2011 at 11:31 replied.
      Reply

      @J.C., :lol: ，确实失效了，很多站有的

  4. Gravatar
    J.C. Google Chrome Google Chrome 15.0.874.120 Windows Windows 7
    十一月 18th, 2011 at 11:03  | #4
    Reply

    这个主题怎么那么像suffusion

    • Gravatar Harid  @  十一月 18th, 2011 at 11:32 replied.
      Reply

      @J.C., 好眼力，当时确实参照了Suffusion的设计。

  5. Gravatar
    redsun Mozilla Firefox Mozilla Firefox 4.0b11 Windows Windows 7
    三月 25th, 2011 at 23:57  | #5
    Reply

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

    • Gravatar Harid  @  三月 26th, 2011 at 14:46 replied.
      Reply

      @redsun, 仔细看看万戈的这篇文章：http://wange.im/mouseover-link-slide-for-wordpress.html

  6. Gravatar
    Junan Internet Explorer Internet Explorer 8.0 Windows Windows XP
    一月 3rd, 2011 at 16:44  | #6
    Reply

    :grin: 谢了~~我的也搞好了~~

  7. Gravatar
    爱惜 Internet Explorer Internet Explorer 7.0 Windows Windows 7
    十二月 7th, 2010 at 20:51  | #7
    Reply

    确实是很好的教程，支持了。

  8. Gravatar
    小杰博客 Mozilla Firefox Mozilla Firefox 4.0b7 Windows Windows 7
    十一月 29th, 2010 at 16:38  | #8
    Reply

    学习一下，我要加上，不过看起来有点麻烦哦

    • Gravatar Harid  @  十一月 29th, 2010 at 20:35 replied.
      Reply

      @小杰博客, 也不麻烦的，主要看你想加上的欲望强不强烈。

评论分页
9 + 2 =  (required)
 疑问 鼓掌 难过 呲牙 强 微笑 快哭了 坏笑 汗 奋斗 撇嘴 OK 偷笑 委屈 尴尬 傲慢 握手 玫瑰 胜利 大哭 抱拳
启用云输入法:      

NOTICE1: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!

NOTICE2: 请申请gravatar头像(http://en.gravatar.com)，木有头像的会显示为“小怪物”头像，将难以通过审核！

NOTICE3: 如果您能消除一下评论框旁边的邻居的寂寞的话，Harid将不胜感激，你懂的！^_^