Geek一下About页面

Posted on 2011 年 11 月 13 日 by jason

在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