动态 +1 效果

108 Comments

蛋疼，我也不知道给这效果起名字，就这样吧，这样大家更加容易理解。

话说YD的 @MOPVHS 写了一篇WordPress)借jQuery之力找出坐沙发的是谁，进去看后发现这个功能没撒好玩的，于是就继续做我喜欢的事---看评论。往下一拖动，就发现了一个红色字体的 +1 渐渐的上升（开始我以为是JQ实现的，后来发现是张图片，日）。

效果就是图中这样，，评论提交成功后就会如下图所示的一样，你30天内的评论数 +1 ，真是效果大家评论后就可以看到的。

实现这个效果不难，仅仅只是用到了jQuery的 animate 函数。首先说说我博客的评论环境，我博客使用的是非嵌套的Ajax提交方法，修改方法来至于 @Xiaorsz ，其实这些影响都不大，直接给出代码吧，修改的文件就看你自己的博客是怎么折腾的了。

//.......省略Ajax提交的一部分，从提交成功后开始
setTimeout(function() {//延迟执行，为的是让新提交的评论显示完以后再执行
    $('.comment-num').after('<span class="comment-add">+1</span>');//添加一个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)
}
});

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

实现代码就这么一点，其他的美化大家自己再去试吧。

从来没有在本博客评论过；
当前浏览器中没有本博的Cookie记录；
浏览器中有Cookie记录，但是30天之内没有任何评论的；

PS.以上三种情况是不会显示这种效果的，解决办法就是添加一条评论后刷新页面再评论就可以看到效果了。

2010-08-16 21:59 / 分享网事 / jquery, 动态

如果你有钱，请赏我一点。

腾讯微博新浪微博 Twitter 豆瓣人人 QQ空间 Facebook

已有 108 条评论 »

逸冰 2010-08-16 22:06:38

回复

在这里看到： Hi! 逸冰，过去30天内您评论过 8 次，感谢关注！
点提交评论就是可以给我加1分......我点了，就点来试下的哦.....
MOPVHS 2010-08-16 22:10:12

回复

我的沙发！！！！！！！
forece 2010-08-16 22:11:29

回复

我也玩玩。
冰剑 2010-08-16 22:22:35

回复

@逸冰
是D，效果就在这。
@MOPVHS
你坐的是板凳。
@forece
好玩吧，第一次免费，以后 1元/次，博友免费，哇哈哈。
浩子 2010-08-16 22:40:35

回复

我也来玩下
哈哈 :mrgreen:
真实蛋疼啊
浩子 2010-08-16 22:40:58

回复

我晕，还不显示，再来…… :twisted:
浩子 2010-08-16 22:41:53

回复

为啥还是没显示…… :x :twisted:
冰剑 2010-08-16 22:48:14

回复

@浩子
。。。。你为什么搞什么都和别人与众不同啊，别人都能显示，就你不能，郁闷。。
浩子 2010-08-16 22:50:41

回复

@冰剑
我晓得为啥了，我浏览器清理后，就没你这的记录，只有重新评论后，再回过头来看看才有，囧
冰剑 2010-08-16 22:51:33

回复

@浩子
。。。。一年多的记录都还在这里，一直没删除过。。。
浩子 2010-08-16 22:52:53

回复

@冰剑
汗……你NB，也不怕有时候浏览器缓存多了卡的很
冰剑 2010-08-16 22:53:59

回复

@浩子
缓存我清理啊，我只是没有把Cookie等记录清理掉。
浩子 2010-08-16 22:55:10

回复

@冰剑
额……还不睡。。。
冰剑 2010-08-16 22:57:40

回复

@浩子
第一天认识我啊？这个时候还早啊，我一般都是四五点才睡觉的。
浩子 2010-08-16 23:01:30

回复

@冰剑
哎，这娃没救了。
冰剑 2010-08-16 23:06:12

回复

@浩子
你是医生，以救人为己任，其实我还可以抢救一下，赶快找个护士MM来抢救我吧，要快。
浩子 2010-08-16 23:07:50

回复

@冰剑
额……洗洗睡吧。。。
:mrgreen:
我来刷屏来了
冰剑 2010-08-16 23:14:17

回复

@浩子
额，欢迎来刷，最好带个护士MM一起来，哇哈哈。。
joyla 2010-08-16 23:54:32

回复

我试试效果，呵呵！
joyla 2010-08-16 23:54:51

回复

咋没效果呢？
冰剑 2010-08-17 00:10:34

回复

@joyla
注意看日志后面的PS提示。。
MOPVHS 2010-08-17 00:15:04

回复

半夜过来录像... :twisted:
阿七 2010-08-17 00:26:55

回复

测试一下，这功能和论坛上的一样，不错吖 :idea:
阿七 2010-08-17 00:27:29

回复

@阿七
我汗，你没有用这个效果吗？ :cry:
阿七 2010-08-17 00:27:56

回复

@阿七
看到了，第一次没有，真晕。 :shock:
冰剑 2010-08-17 00:30:32

回复

@MOPVHS
看什么录象？？？
冰剑 2010-08-17 00:30:56

回复

@阿七
额，看来后面的那PS说明要加色才行。。
QiQiBoY 2010-08-17 01:26:11

回复

我试一下。。
lifishake 2010-08-17 08:25:06

回复

以前就一直很好奇.
没想到是图片
丕子 2010-08-17 08:38:39

回复

哈哈不错阿我也试试
丕子 2010-08-17 08:39:05

回复

哈哈感觉很不错的效果
joyla 2010-08-17 09:16:58

回复

@冰剑啊哦！啊哦！啊哦！啊哦！呵呵，看到那个表情的效果了！呵呵
insect 2010-08-17 10:25:02

回复

效果不错，呵呵
Mini Dragon 2010-08-17 11:14:06

回复

啊你是典型的裁缝!!!!到处拿代码~插件装了很多~我就3个哈哈
万戈 2010-08-17 13:30:29

回复

可以借鉴一下，新主题有用，收藏之，以观后效 :mrgreen:
我心飞翔 2010-08-17 14:55:13

回复

博主跟我一同事的博客名称起的一样啊。。呵呵，认识一下了，他是做前端的
冰剑 2010-08-17 14:58:57

回复

@lifishake
日志中的是图片，实际效果是jQuery写的。
@joyla
:cry: 那不是表情效果，那是演示的图片。
@Mini Dragon
满足自己的需求，给访客最好的体验感。玩WP如果不折腾，还不如去用比较傻瓜化的程序。
@万戈
万哥哥这几天技术文章少了，都没地方学新东西了。
N 2010-08-17 15:22:16

回复

@MOPVHS 沙发没了吧 :lol:
冰剑 2010-08-17 16:05:59

回复

@=N=
算了，给你个特权，我再判断，是你的话就免验证。。
N 2010-08-17 16:45:38

回复

@冰剑 GM就是不一样
:lol:
MOPVHS 2010-08-17 17:53:56

回复

@N
:evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:
joyla 2010-08-17 18:10:59

回复

@冰剑恩，我被忽悠了！原来是我太外行了！呵呵
N 2010-08-17 21:22:31

回复

MT，怎么没有留言板？
冰剑 2010-08-17 21:39:38

回复

@N
留言板里面的留言太多了，近1000条。。。
Dianso 2010-08-18 02:28:33

回复

测试下
yetone 2010-08-18 05:01:50

回复

我要加血
yetone 2010-08-18 05:02:08

回复

爽歪歪啊
搜搜 2010-08-18 08:03:05

回复

试试看
MOPVHS 2010-08-18 09:07:19

回复

顺手加血...最喜欢这医疗技能了~~~
mice 2010-08-18 09:26:12

回复

;-) 又一技术哥哇
winy 2010-08-18 11:19:55

回复

我也来测试
宿迁学院论坛 2010-08-18 13:09:14

回复

哈哈这个动态效果很不错的啊
DZ和PW 论坛都有这个效果~
宿迁学院论坛 2010-08-18 13:09:44

回复

哈哈再来一次真的蛮漂亮的
等我那论坛整差不多了
我也来加上去~
宿迁学院论坛 2010-08-18 13:10:08

回复

哈哈我发上瘾了怎么办啊……
额不行我得去搞我那个论坛了呵呵下次再来~
WordPress啦 2010-08-18 16:19:20

回复

呵呵
很不错的说哦
Bob 2010-08-18 17:55:33

回复

诶不错试试 :arrow:
方丈 2010-08-18 18:23:04

回复

好吧~为了能够看到效果，我来评论了
yetone 2010-08-18 18:51:47

回复

@mice
你快加上去吧
平平 2010-08-18 19:49:51

回复

搞搞真不错，我来+1试试
我心飞翔 2010-08-18 21:00:33

回复

博主很长时间没更新了
浩子 2010-08-18 21:29:41

回复

就冲着链接页面，我果断留下一个脚印…… :mrgreen:
冰剑 2010-08-18 21:45:27

回复

@MOPVHS
自从加血的效果出来后，我这也热闹了，加血的人也多了。
@方丈
话说第一次是看不到效果的。。
@平平
现在这效果有名字了，不再叫做+1效果，而是加血效果，哈哈。
@我心飞翔
才两天啊，我本来更新频率就不高，差不多一个星期才一两篇。
@浩子
丫的，鄙视你，已经第一了还来水。
彼岸星辰 2010-08-18 21:47:34

回复

@浩子
B4你，都第一个了还凑热闹！
MOPVHS 2010-08-18 22:27:42

回复

@冰剑是滴，效果显著！
方丈 2010-08-19 09:34:04

回复

@冰剑好吧……我果断的再留下一个脚印……
:oops:
小闇 2010-08-19 19:00:16

回复

我也來測試了 ;-)
逸冰 2010-08-19 21:26:11

回复

@冰剑
浩子救苦就难，来普渡下我们，护士MM呢
小闇 2010-08-19 22:18:36

回复

再留一個腳印……
knife 2010-08-20 11:15:51

回复

感觉像加血一样
冰剑 2010-08-20 14:21:34

回复

@小闇
台湾同胞吗？？
@逸冰
是啊，我也要一个护士MM。。
@knife
这效果美名加血效果。
小闇 2010-08-20 15:22:01

回复

@冰剑
不不不，我是HK一名毫不起眼的MM ;-)
秦大少 2010-08-20 17:38:39

回复

来体验下效果
冰剑 2010-08-20 18:43:30

回复

@小闇
:grin: MM也，热烈欢迎，大家鼓掌。。（GG来了我都不热烈欢迎的）
阿修 2010-08-20 18:52:25

回复

我来试试~~
大灰很 2010-08-21 11:48:30

回复

哇咔咔，试试看，这是第六条评论
snowxh 2010-08-21 17:39:24

回复

在你的链接页面拿鼠标划一划感觉超好
冰剑 2010-08-22 14:49:14

回复

@snowxh
是不是有种鼠标轨迹的感觉。。。
yetone 2010-08-23 01:40:09

回复

测试一下你睡了没有
冰剑 2010-08-23 02:54:20

回复

@yetone
我属夜猫的。。
yetone 2010-08-23 02:55:51

回复

@冰剑
同行 :oops:
林木木 2010-08-24 16:37:02

回复

这要试一试～
林木木 2010-08-24 16:37:19

回复

哦哦额额～
小不点 2010-08-24 19:44:47

回复

0.0我来试试
ryan 2010-08-25 16:46:08

回复

你人气爆高啊~~
ryan 2010-08-25 16:46:59

回复

本尊IE6亲测，无效果~娃哈哈
封IE6吧~~
冰剑 2010-08-25 21:58:13

回复

@ryan
就这个日志人气高。。
IE6无视。。
浩子 2010-08-26 17:33:46

回复

再来玩玩……
ZDAvril 2010-08-27 22:44:37

回复

这效果不错啊。test.
Ygs 2010-08-28 01:11:10

回复

这个，我也来试试看吧
寨主 2010-08-28 14:05:23

回复

10天试读结束了……来逛逛……
蛋卷 2010-08-28 16:23:07

回复

我看看加一了么
搜搜 2010-09-04 23:51:15

回复

不错哦
搜搜 2010-09-04 23:57:20

回复

我也想弄成这样
风吟 2010-09-08 22:20:34

回复

不明真相！我完全打酱油的！
什么js 网络技术 php java 生活日志我一个不懂！
我只是想对博主问一声！您好！辛苦了
逸冰 2010-09-20 12:40:12

回复

@冰剑
就是这个日记评论94，就快突破100啦
喀喀喀 2010-10-11 02:13:02

回复

试一试
拆墙部队 2010-10-14 16:57:09

回复

我勒个去，居然还有这功能啊，看看我的头像能否出现在 Index 上。 :mrgreen:
拆墙部队 2010-10-14 16:57:57

回复

还是没有哇，看来要再水一点儿，但是不要过分了，嘎。 :lol:
拆墙部队 2010-10-14 16:58:48

回复

嘿，话说这个留言这里是用的 JS（JQ）做的么？还带滑动的！
冰剑 2010-10-15 11:41:17

回复

@拆墙部队
欢迎继续水，哇哈哈。。
是JQ的效果，嘿嘿。
默玉 2010-11-14 23:36:40

回复

我说你也给弄个懒人按钮行不？我鼠标滚轮都坏了
1. 冰剑 2010-11-15 00:56:07
  
  回复
  
  额，最近比较忙，回来了就休息，没经历折腾了。
林木木 2010-12-03 19:54:56

回复

酷～
1. 冰剑 2010-12-03 20:26:51
  
  回复
  
  晕，早没效果了，哪来的酷。
  
  林木木 2010-12-03 21:26:36
  
  回复
  
  不是图还在嘛～
  
  冰剑 2010-12-03 23:02:06
  
  回复
  
  看图自己想象效果，呵呵。
小松 2010-12-10 16:00:40

回复

很好玩~
evbby 2011-10-10 00:04:26

回复

我试试效果，呵呵！

最近回复

动态 +1 效果

已有 108 条评论 »

– 用户面板

– 我的应用

– 实时动态（测试）

– User Online（测试）