动态 +1 效果

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

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

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

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

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

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

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

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

THE END
jquery动态
禁止黑名单的评论
前往深圳

添加评论

已有 119 条评论

由 Google AI Gemini Pro 生成

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

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

逸冰
逸冰 2010-08-16 22:06 回复
浙江 Windows XP Firefox

在这里看到: Hi! 逸冰,过去30天内您评论过 8 次,感谢关注!
点提交评论就是可以给我加1分......我点了,就点来试下的哦.....

冰剑
冰剑 MOD 2010-08-16 22:22 回复
湖南 Windows 7 Firefox

是D,效果就在这。

MOPVHS
MOPVHS 2010-08-16 22:10 回复
浙江 Windows 7 Chrome

我的沙发!!!!!!!

冰剑
冰剑 MOD 2010-08-16 22:22 回复
湖南 Windows 7 Firefox

你坐的是板凳。

N
N 2010-08-17 15:22 回复
江苏 Windows XP Chrome

沙发没了吧 :lol:

冰剑
冰剑 MOD 2010-08-17 16:05 回复
湖南 Windows 7 Firefox

算了,给你个特权,我再判断,是你的话就免验证。。

N
N 2010-08-17 16:45 回复
江苏 Windows XP Chrome

GM就是不一样
:lol:

MOPVHS
MOPVHS 2010-08-17 17:53 回复
浙江 Windows 7 Chrome

:evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:

FORECE
FORECE 2010-08-16 22:11 回复
加拿大 Windows XP Firefox

我也玩玩。

冰剑
冰剑 MOD 2010-08-16 22:22 回复
湖南 Windows 7 Firefox

好玩吧,第一次免费,以后 1元/次 ,博友免费,哇哈哈。

浩子
浩子 2010-08-16 22:40 回复
贵州 Windows 7 Internet Explorer

我也来玩下
哈哈 :mrgreen:
真实蛋疼啊

冰剑
冰剑 MOD 2010-08-16 22:48 回复
湖南 Windows 7 Firefox

。。。。你为什么搞什么都和别人与众不同啊,别人都能显示,就你不能,郁闷。。

浩子
浩子 2010-08-16 22:50 回复
贵州 Windows 7 Internet Explorer

我晓得为啥了,我浏览器清理后,就没你这的记录,只有重新评论后,再回过头来看看才有,囧

冰剑
冰剑 MOD 2010-08-16 22:51 回复
湖南 Windows 7 Firefox

。。。。一年多的记录都还在这里,一直没删除过。。。

浩子
浩子 2010-08-16 22:52 回复
贵州 Windows 7 Internet Explorer

汗……你NB,也不怕有时候浏览器缓存多了卡的很

冰剑
冰剑 MOD 2010-08-16 22:53 回复
湖南 Windows 7 Firefox

缓存我清理啊,我只是没有把Cookie等记录清理掉。

浩子
浩子 2010-08-16 22:55
贵州 Windows 7 Internet Explorer

额……还不睡。。。

冰剑
冰剑 MOD 2010-08-16 22:57
湖南 Windows 7 Firefox

第一天认识我啊?这个时候还早啊,我一般都是四五点才睡觉的。

浩子
浩子 2010-08-16 23:01
贵州 Windows 7 Internet Explorer

哎,这娃没救了。

冰剑
冰剑 MOD 2010-08-16 23:06
湖南 Windows 7 Firefox

你是医生,以救人为己任,其实我还可以抢救一下,赶快找个护士MM来抢救我吧,要快。

浩子
浩子 2010-08-16 23:07
贵州 Windows 7 Internet Explorer

额……洗洗睡吧。。。
:mrgreen:
我来刷屏来了

冰剑
冰剑 MOD 2010-08-16 23:14
湖南 Windows 7 Firefox

额,欢迎来刷,最好带个护士MM一起来,哇哈哈。。

逸冰
逸冰 2010-08-19 21:26
浙江 Windows XP Firefox

浩子 救苦就难,来普渡下我们,护士MM呢

冰剑
冰剑 MOD 2010-08-20 14:21
湖南 Windows 7 Firefox

是啊,我也要一个护士MM。。

浩子
浩子 2010-08-16 22:40 回复
贵州 Windows 7 Internet Explorer

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

浩子
浩子 2010-08-16 22:41 回复
贵州 Windows 7 Internet Explorer

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

joyla
joyla 2010-08-16 23:54 回复
青海 Windows XP Chrome

我试试效果,呵呵!

joyla
joyla 2010-08-16 23:54 回复
青海 Windows XP Chrome

咋没效果呢?

冰剑
冰剑 MOD 2010-08-17 00:10 回复
湖南 Windows 7 Firefox

注意看日志后面的PS提示。。

joyla
joyla 2010-08-17 09:16 回复
青海 Windows XP Internet Explorer

啊哦!啊哦!啊哦!啊哦!呵呵,看到那个表情的效果了!呵呵

冰剑
冰剑 MOD 2010-08-17 14:58 回复
湖南 Windows 7 Firefox

:cry: 那不是表情效果,那是演示的图片。

MOPVHS
MOPVHS 2010-08-17 00:15 回复
浙江 Windows 7 Chrome

半夜过来录像... :twisted:

冰剑
冰剑 MOD 2010-08-17 00:30 回复
湖南 Windows 7 Firefox

看什么录象???

阿七
阿七 2010-08-17 00:26 回复
山东 Windows XP Firefox

测试一下,这功能和论坛上的一样,不错吖 :idea:

阿七
阿七 2010-08-17 00:27 回复
山东 Windows XP Firefox

我汗,你没有用这个效果吗? :cry:

阿七
阿七 2010-08-17 00:27 回复
山东 Windows XP Firefox

看到了,第一次没有,真晕。 :shock:

冰剑
冰剑 MOD 2010-08-17 00:30 回复
湖南 Windows 7 Firefox

额,看来后面的那PS说明要加色才行。。

QiQiBoY
QiQiBoY 2010-08-17 01:26 回复
北京 Windows 7 Firefox

我试一下。。

lifishake
lifishake 2010-08-17 08:25 回复
辽宁 Windows XP Firefox

以前就一直很好奇.
没想到是图片

冰剑
冰剑 MOD 2010-08-17 14:58 回复
湖南 Windows 7 Firefox

日志中的是图片,实际效果是jQuery写的。

joyla
joyla 2010-08-17 18:10 回复
青海 Windows XP Chrome

恩,我被忽悠了!原来是我太外行了!呵呵

丕子
丕子 2010-08-17 08:38 回复
山东 Linux Firefox

哈哈 不错阿 我也试试

丕子
丕子 2010-08-17 08:39 回复
山东 Linux Firefox

哈哈 感觉很不错的效果

insect
insect 2010-08-17 10:25 回复
陕西 Windows XP Chrome

效果不错,呵呵

Mini Dragon
Mini Dragon 2010-08-17 11:14 回复
浙江 Linux Firefox

啊 你是典型的裁缝!!!!到处拿代码~插件装了很多~我就3个哈哈

冰剑
冰剑 MOD 2010-08-17 14:58 回复
湖南 Windows 7 Firefox

满足自己的需求,给访客最好的体验感。玩WP如果不折腾,还不如去用比较傻瓜化的程序。

万戈
万戈 2010-08-17 13:30 回复
上海 Windows XP Firefox

可以借鉴一下,新主题有用,收藏之,以观后效 :mrgreen:

冰剑
冰剑 MOD 2010-08-17 14:58 回复
湖南 Windows 7 Firefox

万哥哥这几天技术文章少了,都没地方学新东西了。

我心飞翔
我心飞翔 2010-08-17 14:55 回复
河南 Windows XP Internet Explorer

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

N
N 2010-08-17 21:22 回复
江苏 Windows 7 Chrome

MT,怎么没有留言板?

冰剑
冰剑 MOD 2010-08-17 21:39 回复
湖南 Windows 7 Firefox

留言板里面的留言太多了,近1000条。。。

Dianso
Dianso 2010-08-18 02:28 回复
山西 Windows XP Chrome

测试下

yetone
yetone 2010-08-18 05:01 回复
山东 Windows XP Chrome

我要加血

yetone
yetone 2010-08-18 05:02 回复
山东 Windows XP Chrome

爽歪歪啊

搜搜
搜搜 2010-08-18 08:03 回复
浙江 Windows 7 Chrome

试试看

MOPVHS
MOPVHS 2010-08-18 09:07 回复
浙江 Windows 7 Chrome

顺手加血...最喜欢这医疗技能了~~~

冰剑
冰剑 MOD 2010-08-18 21:45 回复
湖南 Windows 7 Firefox

自从加血的效果出来后,我这也热闹了,加血的人也多了。

MOPVHS
MOPVHS 2010-08-18 22:27 回复
浙江 Windows 7 Chrome

是滴,效果显著!

方丈
方丈 2010-08-19 09:34 回复
美国 Windows 7 Chrome

好吧……我果断的再留下一个脚印……
:oops:

mice
mice 2010-08-18 09:26 回复
重庆 Windows XP Internet Explorer

;-) 又一技术哥哇

yetone
yetone 2010-08-18 18:51 回复
山东 Windows XP Chrome

你快加上去吧

winy
winy 2010-08-18 11:19 回复
新疆 Windows 7 Chrome

我也来测试

海天无影
海天无影 2010-08-18 13:09 回复
江苏 Windows XP Chrome

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

海天无影
海天无影 2010-08-18 13:09 回复
江苏 Windows XP Chrome

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

海天无影
海天无影 2010-08-18 13:10 回复
江苏 Windows XP Chrome

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

WordPress啦
WordPress啦 2010-08-18 16:19 回复
安徽 Windows XP Internet Explorer

呵呵
很不错的说哦

Bob
Bob 2010-08-18 17:55 回复
浙江 Windows XP Internet Explorer

诶 不错 试 试 :arrow:

方丈
方丈 2010-08-18 18:23 回复
北京 Windows 7 Chrome

好吧~为了能够看到效果,我来评论了

冰剑
冰剑 MOD 2010-08-18 21:45 回复
湖南 Windows 7 Firefox

话说第一次是看不到效果的。。

平平
平平 2010-08-18 19:49 回复
江苏 Windows XP Internet Explorer

搞搞真不错,我来+1试试

冰剑
冰剑 MOD 2010-08-18 21:45 回复
湖南 Windows 7 Firefox

现在这效果有名字了,不再叫做+1效果,而是加血效果,哈哈。

我心飞翔
我心飞翔 2010-08-18 21:00 回复
河南 Windows 7 Firefox

博主很长时间没更新了

冰剑
冰剑 MOD 2010-08-18 21:45 回复
湖南 Windows 7 Firefox

才两天啊,我本来更新频率就不高,差不多一个星期才一两篇。

浩子
浩子 2010-08-18 21:29 回复
贵州 Windows 7 Internet Explorer

就冲着链接页面,我果断留下一个脚印…… :mrgreen:

冰剑
冰剑 MOD 2010-08-18 21:45 回复
湖南 Windows 7 Firefox

丫的,鄙视你,已经第一了还来水。

彼岸星辰
彼岸星辰 2010-08-18 21:47 回复
陕西 Windows 7 Firefox

B4你,都第一个了还凑热闹!

小闇
小闇 2010-08-19 19:00 回复
香港 Windows Vista Chrome

我也來測試了 ;-)

冰剑
冰剑 MOD 2010-08-20 14:21 回复
湖南 Windows 7 Firefox

台湾同胞吗??

小闇
小闇 2010-08-20 15:22 回复
香港 Windows Vista Chrome

不不不,我是HK一名毫不起眼的MM ;-)

冰剑
冰剑 MOD 2010-08-20 18:43 回复
湖南 Windows 7 Firefox

:grin: MM也,热烈欢迎,大家鼓掌。。(GG来了我都不热烈欢迎的)

小闇
小闇 2010-08-19 22:18 回复
香港 Windows Vista Chrome

再留一個腳印……

knife
knife 2010-08-20 11:15 回复
江苏 Windows XP Internet Explorer

感觉像加血一样

冰剑
冰剑 MOD 2010-08-20 14:21 回复
湖南 Windows 7 Firefox

这效果美名 加血 效果。

秦大少
秦大少 2010-08-20 17:38 回复
湖南 Windows XP Chrome

来体验下效果

阿修
阿修 2010-08-20 18:52 回复
河南 Windows 7 Firefox

我来试试~~

大灰很
大灰很 2010-08-21 11:48 回复
山东 Windows 7 Firefox

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

snowxh
snowxh 2010-08-21 17:39 回复
天津 Windows Vista Firefox

在你的链接页面拿鼠标划一划感觉超好

冰剑
冰剑 MOD 2010-08-22 14:49 回复
湖南 Windows 7 Firefox

是不是有种鼠标轨迹的感觉。。。

yetone
yetone 2010-08-23 01:40 回复
山东 Windows XP Chrome

测试一下你睡了没有

冰剑
冰剑 MOD 2010-08-23 02:54 回复
湖南 Windows 7 Firefox

我属夜猫的。。

yetone
yetone 2010-08-23 02:55 回复
山东 Windows XP Chrome

同行 :oops:

林木木
林木木 2010-08-24 16:37 回复
浙江 Windows 7 Chrome

这要试一试~

林木木
林木木 2010-08-24 16:37 回复
浙江 Windows 7 Chrome

哦哦额额~

小不点
小不点 2010-08-24 19:44 回复
浙江 Windows XP Chrome

0.0我来试试

Ryan
Ryan 2010-08-25 16:46 回复
美国 Windows XP Internet Explorer

你人气爆高啊~~

冰剑
冰剑 MOD 2010-08-25 21:58 回复
湖南 Windows 7 Firefox

就这个日志人气高。。
IE6无视。。

逸冰
逸冰 2010-09-20 12:40 回复
浙江 Windows XP Firefox

就是这个日记评论94,就快突破100啦

Ryan
Ryan 2010-08-25 16:46 回复
美国 Windows XP Internet Explorer

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

浩子
浩子 2010-08-26 17:33 回复
四川 Windows 7 Internet Explorer

再来玩玩……

ZDAvril
ZDAvril 2010-08-27 22:44 回复
江苏 Windows 7 Chrome

这效果不错啊。test.

Ygs
Ygs 2010-08-28 01:11 回复
广东 Windows 7 Chrome

这个,我也来试试看吧

寨主
寨主 2010-08-28 14:05 回复
浙江 Windows XP Firefox

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

蛋卷
蛋卷 2010-08-28 16:23 回复
山东 Windows XP Internet Explorer

我看看加一了么

搜搜
搜搜 2010-09-04 23:51 回复
浙江 Windows 7 Chrome

不错哦

搜搜
搜搜 2010-09-04 23:57 回复
浙江 Windows 7 Chrome

我也想弄成这样

风吟
风吟 2010-09-08 22:20 回复
广东 Windows XP Chrome

不明真相!我完全打酱油的!

什么js 网络技术 php java 生活日志我一个不懂!

我只是想对博主问一声!您好!辛苦了

喀喀喀
喀喀喀 2010-10-11 02:13 回复
北京 Windows XP Firefox

试一试

拆墙部队
拆墙部队 2010-10-14 16:57 回复
上海 Windows 7 Internet Explorer

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

拆墙部队
拆墙部队 2010-10-14 16:57 回复
上海 Windows 7 Internet Explorer

还是没有哇,看来要再水一点儿,但是不要过分了,嘎。 :lol:

冰剑
冰剑 MOD 2010-10-15 11:41 回复
湖南 Windows 7 Firefox

欢迎继续水,哇哈哈。。
是JQ的效果,嘿嘿。

拆墙部队
拆墙部队 2010-10-14 16:58 回复
上海 Windows 7 Internet Explorer

嘿,话说这个留言这里是用的 JS(JQ)做的么?还带滑动的!

默玉
默玉 2010-11-14 23:36 回复
陕西 Windows XP Safari

我说你也给弄个懒人按钮行不?我鼠标滚轮都坏了

冰剑
冰剑 MOD 2010-11-15 00:56 回复
湖南 Windows 7 Firefox

额,最近比较忙,回来了就休息,没经历折腾了。

林木木
林木木 2010-12-03 19:54 回复
浙江 Windows 7 Chrome

酷~

冰剑
冰剑 MOD 2010-12-03 20:26 回复
湖南 Windows 7 Firefox

晕,早没效果了,哪来的酷。

林木木
林木木 2010-12-03 21:26 回复
浙江 Windows 7 Chrome

不是图还在嘛~

冰剑
冰剑 MOD 2010-12-03 23:02 回复
湖南 Windows 7 Firefox

看图自己想象效果,呵呵。

小松
小松 2010-12-10 16:00 回复
浙江 Windows 7 Firefox

很好玩~

evbby
evbby 2011-10-10 00:04 回复
重庆 Windows 7 Chrome

我试试效果,呵呵!

    目录
    移动设备上继续阅读