西门的后花园

今天朋友Q我，说他的手机掉了，然后给我新手机号，也找我要了我的手机号。因为今天iphone 4国内开始销售嘛，我就跟他开玩笑，旧的不去，新的不来。丢得正好买个iphone 4爽爽！他说他买了Nokia X6，我就去百度了一下。百度还是很推荐自己的产品的，第一名是有啊，进去看了一下价格和参数，无意发现最下面的手机图片展示鼠标划过有震动效果，下班回家就写了几句，搞定。

这里是DEMO

其实很简单，就是几个animate在那里动而已，只要调整好距离和速度就“震”得很舒服，下面是代码和简单的注释：

$(function(){
	$(".phone li img").mouseover(function(){//鼠标移动到图片触发事件
		if(!$(this).is(":animated")){//判断，如果图片不在运动，执行下面代码
			$(this).animate({top:-6},210).animate({top:0},180)//往上6px，回来
			.animate({top:-3},150).animate({top:0},130)//往上3px，回来
			.animate({top:-1},100).animate({top:0},80);//往上1px，回来
		}
	});
});

基本上只要调整好往上的距离和速度，效果就很不错。需要注意的是鼠标快速且多次划动到图片上，不能让图片也执行多次动作，不然鼠标移开后很久，图片还在晃动，所以要写个判断语句。