.jQuery实现 图片震动效果

无意间在网上看到这段代码,亲自试了下很好用,很简单,拿来分享。
这里是DEMO
其实很简单,就是几个animate在那里动而已,只要调整好距离和速度就“震”得很舒服,下面是代码和简单的注释:
[code]
$(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,回来 } }); });
[/code]
基本上只要调整好往上的距离和速度,效果就很不错。需要注意的是鼠标快速且多次划动到图片上,不能让图片也执行多次动作,不然鼠标移开后很久,图片还在晃动,所以要写个判断语句。

未经允许不得转载:Windy's Blog » .jQuery实现 图片震动效果

赞 (0)