看效果：
http://www.any.do/about
http://userlook.com/about/
http://www.live8easy.com/about 

技术原理：
制作一张包含所有动作的图片（CSS Sprites），用了Jquery框架，获取鼠标位置，逻辑判断位置之后，自动更换background-position值以达到显示头像图不同位置。

这里分享一下如何在Wordprss下修改自己的About页面。

一：PS一张九宫格的头像图，其中每格尺寸为：高160px 宽160px。

二：在About页面，HTML编辑状态下添加代码

 <div id="jasonbai" ></div>

三：添加JaveSript代码
由于直接在页面编辑状态下Wordpress是不支持js函数写入的，所以需要到控制面板，打开当前主题编辑状态，找到page.php，编辑。
在里面添加代码如下：

<style type="text/css">

	#jasonbai {
		-moz-border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		-webkit-background-clip: padding-box;
		border-radius: 0.5em;
		background-clip: padding-box;
		display: inline-block;
		-webkit-box-shadow: rgba(0, 0, 0, 0.292969) 1px 1px 4px 0px;
		-moz-box-shadow: rgba(0, 0, 0, 0.292969) 1px 1px 4px 0px;
		width: 160px;
		height: 160px;
		background-image: url(http://www.live8easy.com/wp-content/uploads/2011/11/jasonbai.jpg);
		background-position: -160px -160px;
    }

</style>

CSS代码，自行替换background-image: url()地址

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){

$(document).mousemove(function(e){
  mx=e.pageX;
  my=e.pageY;
  //console.log('x='+mx+' y='+my);

  animate_face(mx,my,'#jasonbai');

}); 

function animate_face(mx,my,face_id) {
  face_pos=$(face_id).offset();
  //console.log(face_id+face_pos.top);

  if(mx<face_pos.left && my<face_pos.top) $(face_id).css('background-position','0px 0px');
  if(face_pos.left+160>mx && mx>face_pos.left && my<face_pos.top) $(face_id).css('background-position','-160px 0px');
  if(mx>face_pos.left+160 && my<face_pos.top) $(face_id).css('background-position','-320px 0px');

  if(mx<face_pos.left && my<face_pos.top+160 && my>face_pos.top) $(face_id).css('background-position','0px -160px');
  if(face_pos.left+160>mx && mx>face_pos.left && my<face_pos.top+160 && my>face_pos.top) $(face_id).css('background-position','-160px -160px');
  if(mx>face_pos.left+160 && my<face_pos.top+160 && my>face_pos.top) $(face_id).css('background-position','-320px -160px');

  if(mx<face_pos.left && my>face_pos.top+160) $(face_id).css('background-position','0px -320px');
  if(face_pos.left+160>mx && mx>face_pos.left && my>face_pos.top+160) $(face_id).css('background-position','-160px -320px');
  if(mx>face_pos.left+160 && my>face_pos.top+160) $(face_id).css('background-position','-320px -320px');
}

})

</script>

JS代码
注：外链的Jquery.min建议上传至自己的主机。

四：保存好，看效果：Demo 动动鼠标试试看，人长的二，见笑了。

测试平台：Google Chrome 15

您可能也喜欢：

第一次设计logo

web设计开发mindmanager

网页版面设计理论之栅格理论

无觅

这几天研究后台，发现了两个有用的东东可以快速帮你解决这个问题！

思路：搬家后图片链接变成坏链，可以把照片地址存到可以外链的相册上，这样就可以实现便捷搬家！

准备搬家前：             

• 用FTP管理工具登录后台，进入/wordpress/wp-content目录，upload里面就是这个博客所有上传的资料，全部下载备用。            
• 上传至可以外链的相册，这里推荐使用Google picasa。因为在后期方便利用插件将图片导入，等等就明白了~

搬至新家导入文章数据后：

• 添加插件easy-picasa，这个插件可以在直接在后台编辑时使用，相当方便。下载使用及教程请点击这里
• 把上传好的照片利用easy-picasa一一对应到文章里就ok了。

这个教程适用于我这样转换服务器的朋友，经过这样的换血之后再搬家就不用这么麻烦了，直接带着图片链接走人~O(∩_∩)O哈哈~

先就写到这，我这摊着还没收拾完…

ps:另外想给博客换个名了，换了新家新域名顺便想把名字也换掉，给提个意见吧~谢谢了！

您可能也喜欢：

即将献上72松博客插件使用系列！

FanFou Tools插件使用

SRG Clean Archives插件使用

无觅

下载live write之后发现提示错误…

看到提示，欢天喜地的登录ＦＴＰ后台，直奔options-writing.php（嗯…哼 俺自己的服务器） 把php文件打开之后才意识到自己更本不懂php

放狗搜去才发现
WordPress XML-RPC接口非授权操作致远程攻击漏洞
在WordPress2.6版本以上默认已经关闭xml-rpc（api接口服务，支持外部访问）

我现在使用的是WordPress2.7…罪过

后在网上看到一贴：若要开启XML-RPC接口，只需后台-撰写-允许（XML-RPC 以及 Atom API 接口发布文章）

蓦然回首，那人却在灯火阑珊处！

您可能也喜欢：

wordpress2.8发布

WordPress博客搬家图片跟着走

主机到期了

无觅

新下载了Google Chrome，没什么感觉，优点就是使用google的产品会比其他的快点，缺点就是崩溃起来连个招呼都不打。

无趣，贴上我开通的google产品，有的其实都不用，google太强大…强大到不能平民化。

您可能也喜欢：

饭后的阅读-google版飞信，高龄av与可怜的BBC

拿Google docs来做市场调查

如何用Google找房,租房

无觅