这里是生活记录站丨技术站>>



jQuery)烟囱冒烟效果插件

Posted by MOPVHS on 2010/08/18 Leave a comment Go to comments




首先介绍，这个非常有爱的效果源于GaYa Design,一极富创意的博客。

原文链接：Puffing Smoke Effect in jQuery
我这边有两处地方运用了此效果：

1、首页左下角突然冒出的浏览器图标：

简单加了判断，目前只识别Chrome、Firefox、Opera…

除了这三种浏览器，如果不是IE，则冒出个超级玛丽：

Ps：不过据@小闇说：“首頁那個chrome飄來了十多次，我表示眼花了@_@?”。

2、沙发风云人物加血特效：

相关代码：

1、先引入smokeeffect.js
2、给沙发风云人物的头像套个div

$("#shafa img").wrap("<div id='add_one_score' class='spawn'></div>");

3、最后设置加血图片即可

SmokeEffect.imgLocation = "图片地址";
SmokeEffect.smokeWidth = 50;
SmokeEffect.smokeHeight = 60;
SmokeEffect.makeEffect("add_one_score", 24, 12);

嗯嗯，就这些，有灵感的同学可以自由发挥了~~~

篇外篇

对了，昨天@冰剑那厮就是受《沙发风云人物加血特效》启发，自创了评论加血秘籍，看图：

围观从速：《动态 +1 效果》

我也果断搞起：

核心代码如下：

CSS：

.comment-add {
	color:red;
	display:none;
	font-weight:bold;
	z-index:16;
	margin-left:-18px;//为了让他显示在评论数量的上面；
	position:absolute;
}

JS：

//.......省略Ajax提交的一部分，从提交成功后开始
setTimeout(function() {//延迟执行，为的是让新提交的评论显示完以后再执行
    $('.comment-num').after('+1');//添加一个span标签在访客30天内评论次数的后面
    $('.comment-add').animate({//让这个标签执行动画效果
        fontSize: '76px',//当前默认的字体大小变大到72px
        opacity: 'hide'//渐渐的隐藏起来
    },
    3600);//动画效果持续3600毫秒
    $('.comment-num').text(parseInt($('.comment-num').text()) + 1)//最后再让访客评论次数+1
},
1200);
setTimeout(function() {//动画执行完以后的操作
    $('.comment-add').remove()//将渐隐后的span标签移除
},
5000)
}
});

我用的是@Willin Kan的comments-ajax.js和comments-ajax.php，所以就把代码加到comments-ajax.js里了。

终于写完了~~~周公，你不要过来，让我飞奔过去！

预发布于：2010-08-18 @ 02:20







jQuery , , ,

96 Comments.

  1. dddd

    Google Chrome 9.0.597.107 Google Chrome 9.0.597.107 Windows XP Windows XP

    2011/03/03 8:38 下午 on 1

    效果不错 :roll: :roll: :roll:

    回复
  2. 默玉

    Maxthon 3.0 Maxthon 3.0 Windows XP Windows XP

    2010/11/14 6:34 下午 on 1

    看看效果

    回复
  3. 西门

    Google Chrome 6.0.472.63 Google Chrome 6.0.472.63 Windows 7 Windows 7

    2010/10/14 8:52 下午 on 1

    这个算插件么？

    回复
  4. popo

    Firefox 3.6.9 Firefox 3.6.9 Windows 7 Windows 7

    2010/09/06 12:56 下午 on 1

    加血！！我觉得是加经验 哈哈

    回复
  5. francis

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7

    2010/08/31 12:40 下午 on 1

    :evil: 卡……

    回复
  6. yesureadmin

    Google Chrome 5.0.375.127 Google Chrome 5.0.375.127 Windows 7 Windows 7

    2010/08/30 6:50 下午 on 1

    很动感啊

    回复
  7. 我心飞翔

    Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP

    2010/08/30 9:14 上午 on 1

    这个AJAX功用用的不错

    回复
  8. 快乐的村长

    Google Chrome 5.0.375.126 Google Chrome 5.0.375.126 Windows 7 Windows 7

    2010/08/26 11:05 上午 on 1

    有意思的东东，哈哈，赞 :grin:

    回复
  9. 卜卜口の

    Google Chrome 6.0.495.0 Google Chrome 6.0.495.0 Windows 7 Windows 7

    2010/08/25 1:18 上午 on 1

    :!: 唔…jQuery无力….

    回复
  10. 小松

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7

    2010/08/24 8:10 下午 on 1

    有意思啊~

    回复
1 2

Leave a Reply


[ Ctrl + Enter ] 订阅评论Feed