动态 +1 效果

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

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

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

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

//.......省略Ajax提交的一部分，从提交成功后开始
//不记得了。

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

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

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

THE-END

PREVIOUS 禁止黑名单的评论

NEXT 前往深圳

这篇文章介绍了一种有趣的动态效果，通过 jQuery 的 animate 函数，实现评论数在提交后逐渐增加。这种效果不仅美观，而且可以鼓励用户积极参与评论，提高博客的互动性。代码实现不难，但需要根据自己的博客环境进行调整。

作为博客的日常博友，我很喜欢这种动态效果，不仅让评论区更加生动活泼，也让我对评论数的变化一目了然。希望作者继续带来更多有趣的文章和代码分享。

已有 119 条评论

逸冰浙江 2010-08-16 22:06

回复

在这里看到： Hi! 逸冰，过去30天内您评论过 8 次，感谢关注！
点提交评论就是可以给我加1分......我点了，就点来试下的哦.....
- 冰剑 MOD 湖南 2010-08-16 22:22
  
  回复
  
  是D，效果就在这。

MOPVHS 浙江 2010-08-16 22:10

回复

我的沙发！！！！！！！
- 冰剑 MOD 湖南 2010-08-16 22:22
  
  回复
  
  你坐的是板凳。
- N 江苏 2010-08-17 15:22
  
  回复
  
  沙发没了吧 :lol:
  
  冰剑 MOD 湖南 2010-08-17 16:05
  
  回复
  
  算了，给你个特权，我再判断，是你的话就免验证。。
  
  N 江苏 2010-08-17 16:45
  
  回复
  
  GM就是不一样
  :lol:
  
  MOPVHS 浙江 2010-08-17 17:53
  
  回复
  
  :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:

FORECE 加拿大 2010-08-16 22:11

回复

我也玩玩。
- 冰剑 MOD 湖南 2010-08-16 22:22
  
  回复
  
  好玩吧，第一次免费，以后 1元/次，博友免费，哇哈哈。

浩子贵州 2010-08-16 22:40

回复

我也来玩下
哈哈 :mrgreen:
真实蛋疼啊
- 冰剑 MOD 湖南 2010-08-16 22:48
  
  回复
  
  。。。。你为什么搞什么都和别人与众不同啊，别人都能显示，就你不能，郁闷。。
  
  浩子贵州 2010-08-16 22:50
  
  回复
  
  我晓得为啥了，我浏览器清理后，就没你这的记录，只有重新评论后，再回过头来看看才有，囧
  
  冰剑 MOD 湖南 2010-08-16 22:51
  
  回复
  
  。。。。一年多的记录都还在这里，一直没删除过。。。
  
  浩子贵州 2010-08-16 22:52
  
  回复
  
  汗……你NB，也不怕有时候浏览器缓存多了卡的很
  
  冰剑 MOD 湖南 2010-08-16 22:53
  
  回复
  
  缓存我清理啊，我只是没有把Cookie等记录清理掉。
  
  浩子贵州 2010-08-16 22:55
  
  额……还不睡。。。
  
  冰剑 MOD 湖南 2010-08-16 22:57
  
  第一天认识我啊？这个时候还早啊，我一般都是四五点才睡觉的。
  
  浩子贵州 2010-08-16 23:01
  
  哎，这娃没救了。
  
  冰剑 MOD 湖南 2010-08-16 23:06
  
  你是医生，以救人为己任，其实我还可以抢救一下，赶快找个护士MM来抢救我吧，要快。
  
  浩子贵州 2010-08-16 23:07
  
  额……洗洗睡吧。。。
  :mrgreen:
  我来刷屏来了
  
  冰剑 MOD 湖南 2010-08-16 23:14
  
  额，欢迎来刷，最好带个护士MM一起来，哇哈哈。。
  
  逸冰浙江 2010-08-19 21:26
  
  浩子救苦就难，来普渡下我们，护士MM呢
  
  冰剑 MOD 湖南 2010-08-20 14:21
  
  是啊，我也要一个护士MM。。

浩子贵州 2010-08-16 22:40

回复

我晕，还不显示，再来…… :twisted:

浩子贵州 2010-08-16 22:41

回复

为啥还是没显示…… :x :twisted:

joyla 青海 2010-08-16 23:54

回复

我试试效果，呵呵！

joyla 青海 2010-08-16 23:54

回复

咋没效果呢？
- 冰剑 MOD 湖南 2010-08-17 00:10
  
  回复
  
  注意看日志后面的PS提示。。
  
  joyla 青海 2010-08-17 09:16
  
  回复
  
  啊哦！啊哦！啊哦！啊哦！呵呵，看到那个表情的效果了！呵呵
  
  冰剑 MOD 湖南 2010-08-17 14:58
  
  回复
  
  :cry: 那不是表情效果，那是演示的图片。

MOPVHS 浙江 2010-08-17 00:15

回复

半夜过来录像... :twisted:
- 冰剑 MOD 湖南 2010-08-17 00:30
  
  回复
  
  看什么录象？？？

阿七山东 2010-08-17 00:26

回复

测试一下，这功能和论坛上的一样，不错吖 :idea:
- 阿七山东 2010-08-17 00:27
  
  回复
  
  我汗，你没有用这个效果吗？ :cry:
  
  阿七山东 2010-08-17 00:27
  
  回复
  
  看到了，第一次没有，真晕。 :shock:
  
  冰剑 MOD 湖南 2010-08-17 00:30
  
  回复
  
  额，看来后面的那PS说明要加色才行。。

QiQiBoY 北京 2010-08-17 01:26

回复

我试一下。。

lifishake 辽宁 2010-08-17 08:25

回复

以前就一直很好奇.
没想到是图片
- 冰剑 MOD 湖南 2010-08-17 14:58
  
  回复
  
  日志中的是图片，实际效果是jQuery写的。
  
  joyla 青海 2010-08-17 18:10
  
  回复
  
  恩，我被忽悠了！原来是我太外行了！呵呵

丕子山东 2010-08-17 08:38

回复

哈哈不错阿我也试试

丕子山东 2010-08-17 08:39

回复

哈哈感觉很不错的效果

insect 陕西 2010-08-17 10:25

回复

效果不错，呵呵

Mini Dragon 浙江 2010-08-17 11:14

回复

啊你是典型的裁缝!!!!到处拿代码~插件装了很多~我就3个哈哈
- 冰剑 MOD 湖南 2010-08-17 14:58
  
  回复
  
  满足自己的需求，给访客最好的体验感。玩WP如果不折腾，还不如去用比较傻瓜化的程序。

万戈上海 2010-08-17 13:30

回复

可以借鉴一下，新主题有用，收藏之，以观后效 :mrgreen:
- 冰剑 MOD 湖南 2010-08-17 14:58
  
  回复
  
  万哥哥这几天技术文章少了，都没地方学新东西了。

我心飞翔河南 2010-08-17 14:55

回复

博主跟我一同事的博客名称起的一样啊。。呵呵，认识一下了，他是做前端的

N 江苏 2010-08-17 21:22

回复

MT，怎么没有留言板？
- 冰剑 MOD 湖南 2010-08-17 21:39
  
  回复
  
  留言板里面的留言太多了，近1000条。。。

Dianso 山西 2010-08-18 02:28

回复

测试下

yetone 山东 2010-08-18 05:01

回复

我要加血

yetone 山东 2010-08-18 05:02

回复

爽歪歪啊

搜搜浙江 2010-08-18 08:03

回复

试试看

MOPVHS 浙江 2010-08-18 09:07

回复

顺手加血...最喜欢这医疗技能了~~~
- 冰剑 MOD 湖南 2010-08-18 21:45
  
  回复
  
  自从加血的效果出来后，我这也热闹了，加血的人也多了。
  
  MOPVHS 浙江 2010-08-18 22:27
  
  回复
  
  是滴，效果显著！
  
  方丈美国 2010-08-19 09:34
  
  回复
  
  好吧……我果断的再留下一个脚印……
  :oops:

mice 重庆 2010-08-18 09:26

回复

;-) 又一技术哥哇
- yetone 山东 2010-08-18 18:51
  
  回复
  
  你快加上去吧

winy 新疆 2010-08-18 11:19

回复

我也来测试

海天无影江苏 2010-08-18 13:09

回复

哈哈这个动态效果很不错的啊
DZ和PW 论坛都有这个效果~

海天无影江苏 2010-08-18 13:09

回复

哈哈再来一次真的蛮漂亮的
等我那论坛整差不多了
我也来加上去~

海天无影江苏 2010-08-18 13:10

回复

哈哈我发上瘾了怎么办啊……
额不行我得去搞我那个论坛了呵呵下次再来~

WordPress啦安徽 2010-08-18 16:19

回复

呵呵
很不错的说哦

Bob 浙江 2010-08-18 17:55

回复

诶不错试试 :arrow:

方丈北京 2010-08-18 18:23

回复

好吧~为了能够看到效果，我来评论了
- 冰剑 MOD 湖南 2010-08-18 21:45
  
  回复
  
  话说第一次是看不到效果的。。

平平江苏 2010-08-18 19:49

回复

搞搞真不错，我来+1试试
- 冰剑 MOD 湖南 2010-08-18 21:45
  
  回复
  
  现在这效果有名字了，不再叫做+1效果，而是加血效果，哈哈。

我心飞翔河南 2010-08-18 21:00

回复

博主很长时间没更新了
- 冰剑 MOD 湖南 2010-08-18 21:45
  
  回复
  
  才两天啊，我本来更新频率就不高，差不多一个星期才一两篇。

浩子贵州 2010-08-18 21:29

回复

就冲着链接页面，我果断留下一个脚印…… :mrgreen:
- 冰剑 MOD 湖南 2010-08-18 21:45
  
  回复
  
  丫的，鄙视你，已经第一了还来水。
- 彼岸星辰陕西 2010-08-18 21:47
  
  回复
  
  B4你，都第一个了还凑热闹！

小闇香港 2010-08-19 19:00

回复

我也來測試了 ;-)
- 冰剑 MOD 湖南 2010-08-20 14:21
  
  回复
  
  台湾同胞吗？？
  
  小闇香港 2010-08-20 15:22
  
  回复
  
  不不不，我是HK一名毫不起眼的MM ;-)
  
  冰剑 MOD 湖南 2010-08-20 18:43
  
  回复
  
  :grin: MM也，热烈欢迎，大家鼓掌。。（GG来了我都不热烈欢迎的）

小闇香港 2010-08-19 22:18

回复

再留一個腳印……

knife 江苏 2010-08-20 11:15

回复

感觉像加血一样
- 冰剑 MOD 湖南 2010-08-20 14:21
  
  回复
  
  这效果美名加血效果。

秦大少湖南 2010-08-20 17:38

回复

来体验下效果

阿修河南 2010-08-20 18:52

回复

我来试试~~

大灰很山东 2010-08-21 11:48

回复

哇咔咔，试试看，这是第六条评论

snowxh 天津 2010-08-21 17:39

回复

在你的链接页面拿鼠标划一划感觉超好
- 冰剑 MOD 湖南 2010-08-22 14:49
  
  回复
  
  是不是有种鼠标轨迹的感觉。。。

yetone 山东 2010-08-23 01:40

回复

测试一下你睡了没有
- 冰剑 MOD 湖南 2010-08-23 02:54
  
  回复
  
  我属夜猫的。。
  
  yetone 山东 2010-08-23 02:55
  
  回复
  
  同行 :oops:

林木木浙江 2010-08-24 16:37

回复

这要试一试～

林木木浙江 2010-08-24 16:37

回复

哦哦额额～

小不点浙江 2010-08-24 19:44

回复

0.0我来试试

Ryan 美国 2010-08-25 16:46

回复

你人气爆高啊~~
- 冰剑 MOD 湖南 2010-08-25 21:58
  
  回复
  
  就这个日志人气高。。
  IE6无视。。
  
  逸冰浙江 2010-09-20 12:40
  
  回复
  
  就是这个日记评论94，就快突破100啦

Ryan 美国 2010-08-25 16:46

回复

本尊IE6亲测，无效果~娃哈哈
封IE6吧~~

浩子四川 2010-08-26 17:33

回复

再来玩玩……

ZDAvril 江苏 2010-08-27 22:44

回复

这效果不错啊。test.

Ygs 广东 2010-08-28 01:11

回复

这个，我也来试试看吧

寨主浙江 2010-08-28 14:05

回复

10天试读结束了……来逛逛……

蛋卷山东 2010-08-28 16:23

回复

我看看加一了么

搜搜浙江 2010-09-04 23:51

回复

不错哦

搜搜浙江 2010-09-04 23:57

回复

我也想弄成这样

风吟广东 2010-09-08 22:20

回复

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

喀喀喀北京 2010-10-11 02:13

回复

试一试

拆墙部队上海 2010-10-14 16:57

回复

我勒个去，居然还有这功能啊，看看我的头像能否出现在 Index 上。 :mrgreen:

拆墙部队上海 2010-10-14 16:57

回复

还是没有哇，看来要再水一点儿，但是不要过分了，嘎。 :lol:
- 冰剑 MOD 湖南 2010-10-15 11:41
  
  回复
  
  欢迎继续水，哇哈哈。。
  是JQ的效果，嘿嘿。

拆墙部队上海 2010-10-14 16:58

回复

嘿，话说这个留言这里是用的 JS（JQ）做的么？还带滑动的！

默玉陕西 2010-11-14 23:36

回复

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

林木木浙江 2010-12-03 19:54

回复

酷～
- 冰剑 MOD 湖南 2010-12-03 20:26
  
  回复
  
  晕，早没效果了，哪来的酷。
  
  林木木浙江 2010-12-03 21:26
  
  回复
  
  不是图还在嘛～
  
  冰剑 MOD 湖南 2010-12-03 23:02
  
  回复
  
  看图自己想象效果，呵呵。

小松浙江 2010-12-10 16:00

回复

很好玩~

evbby 重庆 2011-10-10 00:04

回复

我试试效果，呵呵！

动态 +1 效果

AI 评论

添加评论

已有 119 条评论