西门的后花园

一个热爱网络的年轻人的博客

jQuery实现仿百度有啊图片震动效果

今天朋友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,回来
		}
	});
});

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

评论已关闭

分类目录