让图片"跳"起来
网上溜达，偶见一网站的产品可以“跳动”，给用户以活跃的感觉，于是自己也实现一下，如果您碰巧也在完成产品展示类的网站不妨也给产品来点“灵性”。
描述的有点晕乎了，其实很简单就是jquery的一个动画效果 。请鼠标滑过图片。
网上溜达，偶见一网站的产品可以“跳动”，给用户以活跃的感觉，于是自己也实现一下，如果您碰巧也在完成产品展示类的网站不妨也给产品来点“灵性”。
描述的有点晕乎了，其实很简单就是jquery的一个动画效果 。请鼠标滑过图片。
连续两次按“向左键”
（图片为前些天的日食，不知道您是否亲眼目睹了这一景观）
现在是不是现在图片消失了?找不到了吧？^_^！
看看图片上方的提示吧，放心的按吧不是病毒的！
这个效果是模仿的效果，如果您有充分的想象里，用jquery编一个自己的小游戏也不是不可能的。
效果看过了，为了证明这个很简单，下面把代码贴上来，简单解释一下。（虽然每次我都说简单，但是有些jquery和CSS初学者还是想知其所以然，所以我就解释一下。）
下面的内容高手可以忽略了。
JS：
1 <script type="text/javascript">
2 $().ready(function(){
3 $("#game img").mouseover(
4 function(){
5 $(this).stop().animate({top:0},160).animate({top:6},160)
6 .animate({top:2},100).animate({top:6},100)
7 .animate({top:4},100).animate({top:6},100)
8 .animate({top:6},50); //鼠标滑过动画
9 $('#game img').fadeTo(1000,0); //渐隐图片
10 }
11 );
12 var k = []; //建立一个空的数组
13 $(document).keydown(function(e){
14 k.push(e.keyCode); //把每一次按下的键码加入到数组k当中
15 if(k.toString().indexOf('37,37')>=0){//判断是否连续两次向左按键
16 $('#game').stop().animate({left:20},200).animate({left:0},160).animate({left:10},160).animate({left:0},160).animate({left:3},100).animate({left:0},100);
17 k = []; //清空数组
18 $('#game img').fadeTo(1000,1); //相应按键操作，渐渐显示图片此处可以随意发挥
19 }
20 });
21
22 });
23 </script>
2 $().ready(function(){
3 $("#game img").mouseover(
4 function(){
5 $(this).stop().animate({top:0},160).animate({top:6},160)
6 .animate({top:2},100).animate({top:6},100)
7 .animate({top:4},100).animate({top:6},100)
8 .animate({top:6},50); //鼠标滑过动画
9 $('#game img').fadeTo(1000,0); //渐隐图片
10 }
11 );
12 var k = []; //建立一个空的数组
13 $(document).keydown(function(e){
14 k.push(e.keyCode); //把每一次按下的键码加入到数组k当中
15 if(k.toString().indexOf('37,37')>=0){//判断是否连续两次向左按键
16 $('#game').stop().animate({left:20},200).animate({left:0},160).animate({left:10},160).animate({left:0},160).animate({left:3},100).animate({left:0},100);
17 k = []; //清空数组
18 $('#game img').fadeTo(1000,1); //相应按键操作，渐渐显示图片此处可以随意发挥
19 }
20 });
21
22 });
23 </script>
来句题外话，太佩服博客园了，以前以为随笔不可以直接插入代码呢，总在猜测别人的演示程序是用的什么编辑器。今天试试了是才明白，原来是什么都不用！
转回正题，上面动画主要是通过.animate()实现的，值得注意的一点是top值和后面的时间长短要协调了，不然图片跳的就有点“卡”了。跳的距离要从高到低，时间一点一点变短，您可以参考google纪念牛顿特效中的自由落体的函数。
对了，差点忘了最重要的一点，完成图片的这个“动作”一定要有CSS的支持，看下面代码
CSS：
<style type="text/css">
#game{ margin:50px auto; height:240px; position:relative; border:dotted 1px #ccc; padding:6px; width:260px;}
#game img{position:absolute;/*一定要有这个*/}
.playrule{ color:#FF6827; font-size:12px; font-weight:bold; height:30px;top:0px; text-align:center;}
</style>
#game{ margin:50px auto; height:240px; position:relative; border:dotted 1px #ccc; padding:6px; width:260px;}
#game img{position:absolute;/*一定要有这个*/}
.playrule{ color:#FF6827; font-size:12px; font-weight:bold; height:30px;top:0px; text-align:center;}
</style>
img 的position属性一定要是absolute的，这样jquery里才可以控制图片的top属性。
说的有点罗嗦了，如果您对CSS不熟悉，请google “CSS position属性”趁现在谷歌(google.cn)还可以用，呵呵!...
