让图片跳起来
网上溜达，偶见一网站的产品可以“跳动”，给用户以活跃的感觉，于是自己也实现一下，如果您碰巧也在完成产品展示类的网站不妨也给产品来点“灵性”。
描述的有点晕乎了，其实很简单就是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 >
来句题外话，太佩服博客园了，以前以为随笔不可以直接插入代码呢，总在猜测别人的演示程序是用的什么编辑器。今天试试了是才明白，原来是什么都不用！
转回正题，上面动画主要是通过.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>
img 的position属性一定要是absolute的，这样jquery里才可以控制图片的top属性。
说的有点罗嗦了，如果您对CSS不熟悉，请google “CSS position属性”趁现在谷歌(google)还可以用，呵呵!...
转载于:.html
