西门的后花园

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

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,回来
		}
	});
});

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

评论列表

  1. 沙发..看着你越来越折腾的厉害了,呵呵

  2. 还真不愧是敲代码的。
    不过图片是和你无关,因为百度不让外链……

    • …我忘了外链这事,直接把那人卖的手机图片偷过来了,因为有LOGO。现在我加了本地图片了。

  3. 没看到验证码了 😈

  4. :mrgreen: 让我想起原来学flash的时候 做小球跳动效果了…

    (QQ超大附件上传速度怎么这么快?这里才2M电信而已。)应该是你传的东西,服务器上有那个文件就那样了..我原来传个什么东西 也是秒上传来着.. :mrgreen:

  5. 看前三行的时候竟然忘了这是个jquery特效的文章~哈哈~ :mrgreen:

  6. 我加到header里,对么?

  7. 🙄 镇镇更健康~

  8. 看来最近搜集了不少代码吗

  9. 有点意思。图片被百毒防盗链了

  10. 虽然没有用过百度有啊,但是这个效果挺炫的

  11. 这个功能的确很不错啊

  12. 加到读者墙效果上应该很不错。可惜我不会加。 😉

  13. 这个效果很好看,很酷,不过代码我都是不懂的…… 😡

  14. 我的邮箱有输错了……

  15. 慢慢震哦,嘿嘿。

  16. 效果是怎么样的,有预览没~

  17. 不错的效果,赞一个。

  18. 是不是和后台输错密码一样的?呵呵

  19. “震”得很舒服,看着也挺舒服的

  20. 效果很棒棒! 🙄
    一排链结连续震过去时….有种满足感 :mrgreen: :mrgreen:

  21. 看了下demo,效果不错啊。

  22. 听简单的。

  23. mark 效果不错,没去过有啊

  24. 原来西门是搞技术的啊?
    😆
    收藏了,效果很好。

  25. moonlightdoudou

    好复杂,不懂的飘走…… ➡

  26. 不错的效果啊,呵呵

  27. :mrgreen: 原来如此,有明白了一个jq效果。呵呵 🙄

  28. tankvski

    无头像test

  29. 很不错的说! 😐

  30. XiaoFeng

    不知道怎么看代码的朋友、请在Deml页面直接右击查看源文件、就可以看到全部代码。

西门进行回复 取消回复

分类目录