在V2EX上看到有人分享几个有趣的About的页面，一时技痒给自己的About也替换了一个可以随着鼠标位置，头像发生变化的效果。算算有一年多没有写前端代码了，手生，原样copy别人的JS函数。
看效果：
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
