动态 +1 效果

2010-08-16 / 折腾 / jquery / 动态

494 字 / 约 2 分钟

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

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

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

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

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

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

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

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

119

嘀小咕

由 AI 生成 · 仅供娱乐

我就喜欢你这点，看到个“+1”效果就琢磨着自己也搞一个。这种从日常浏览中发现小细节并动手实现的过程，最有意思了。搞定了，自己看得也开心。
逸冰 08-16 22:06

浙江/Windows/Firefox

回复

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

浙江/Windows/Chrome

回复

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

加拿大/Windows/Firefox

回复

我也玩玩。
1. 冰剑博主 08-16 22:22
  
  湖南/Windows/Firefox
  
  回复
  
  好玩吧，第一次免费，以后 1元/次，博友免费，哇哈哈。
浩子 08-16 22:40

贵州/Windows/IE

回复

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

贵州/Windows/IE

回复

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

贵州/Windows/IE

回复

为啥还是没显示…… :x :twisted:
joyla 08-16 23:54

青海/Windows/Chrome

回复

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

青海/Windows/Chrome

回复

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

浙江/Windows/Chrome

回复

半夜过来录像... :twisted:
1. 冰剑博主 08-17 00:30
  
  湖南/Windows/Firefox
  
  回复
  
  看什么录象？？？
阿七 08-17 00:26

山东/Windows/Firefox

回复

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

北京/Windows/Firefox

回复

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

辽宁/Windows/Firefox

回复

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

山东/Linux/Firefox

回复

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

山东/Linux/Firefox

回复

哈哈感觉很不错的效果
insect 08-17 10:25

陕西/Windows/Chrome

回复

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

浙江/Linux/Firefox

回复

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

上海/Windows/Firefox

回复

可以借鉴一下，新主题有用，收藏之，以观后效 :mrgreen:
1. 冰剑博主 08-17 14:58
  
  湖南/Windows/Firefox
  
  回复
  
  万哥哥这几天技术文章少了，都没地方学新东西了。
我心飞翔 08-17 14:55

河南/Windows/IE

回复

博主跟我一同事的博客名称起的一样啊。。呵呵，认识一下了，他是做前端的
N 08-17 21:22

江苏/Windows/Chrome

回复

MT，怎么没有留言板？
1. 冰剑博主 08-17 21:39
  
  湖南/Windows/Firefox
  
  回复
  
  留言板里面的留言太多了，近1000条。。。
Dianso 08-18 02:28

山西/Windows/Chrome

回复

测试下
yetone 08-18 05:01

山东/Windows/Chrome

回复

我要加血
yetone 08-18 05:02

山东/Windows/Chrome

回复

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

浙江/Windows/Chrome

回复

试试看
MOPVHS 08-18 09:07

浙江/Windows/Chrome

回复

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

重庆/Windows/IE

回复

;-) 又一技术哥哇
1. yetone 08-18 18:51
  
  山东/Windows/Chrome
  
  回复
  
  你快加上去吧
winy 08-18 11:19

新疆/Windows/Chrome

回复

我也来测试
海天无影 08-18 13:09

江苏/Windows/Chrome

回复

哈哈这个动态效果很不错的啊
DZ和PW 论坛都有这个效果~
海天无影 08-18 13:09

江苏/Windows/Chrome

回复

哈哈再来一次真的蛮漂亮的
等我那论坛整差不多了
我也来加上去~
海天无影 08-18 13:10

江苏/Windows/Chrome

回复

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

安徽/Windows/IE

回复

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

浙江/Windows/IE

回复

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

北京/Windows/Chrome

回复

好吧~为了能够看到效果，我来评论了
1. 冰剑博主 08-18 21:45
  
  湖南/Windows/Firefox
  
  回复
  
  话说第一次是看不到效果的。。
平平 08-18 19:49

江苏/Windows/IE

回复

搞搞真不错，我来+1试试
1. 冰剑博主 08-18 21:45
  
  湖南/Windows/Firefox
  
  回复
  
  现在这效果有名字了，不再叫做+1效果，而是加血效果，哈哈。
我心飞翔 08-18 21:00

河南/Windows/Firefox

回复

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

贵州/Windows/IE

回复

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

香港/Windows/Chrome

回复

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

香港/Windows/Chrome

回复

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

江苏/Windows/IE

回复

感觉像加血一样
1. 冰剑博主 08-20 14:21
  
  湖南/Windows/Firefox
  
  回复
  
  这效果美名加血效果。
秦大叔 08-20 17:38

湖南/Windows/Chrome

回复

来体验下效果
阿修 08-20 18:52

河南/Windows/Firefox

回复

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

山东/Windows/Firefox

回复

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

天津/Windows/Firefox

回复

在你的链接页面拿鼠标划一划感觉超好
1. 冰剑博主 08-22 14:49
  
  湖南/Windows/Firefox
  
  回复
  
  是不是有种鼠标轨迹的感觉。。。
yetone 08-23 01:40

山东/Windows/Chrome

回复

测试一下你睡了没有
1. 冰剑博主 08-23 02:54
  
  湖南/Windows/Firefox
  
  回复
  
  我属夜猫的。。
  1. yetone 08-23 02:55
    
    山东/Windows/Chrome
    
    回复
    
    同行 :oops:
林木木 08-24 16:37

浙江/Windows/Chrome

回复

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

浙江/Windows/Chrome

回复

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

浙江/Windows/Chrome

回复

0.0我来试试
Ryan 08-25 16:46

美国/Windows/IE

回复

你人气爆高啊~~
1. 冰剑博主 08-25 21:58
  
  湖南/Windows/Firefox
  
  回复
  
  就这个日志人气高。。
  IE6无视。。
  1. 逸冰 09-20 12:40
    
    浙江/Windows/Firefox
    
    回复
    
    就是这个日记评论94，就快突破100啦
Ryan 08-25 16:46

美国/Windows/IE

回复

本尊IE6亲测，无效果~娃哈哈
封IE6吧~~
浩子 08-26 17:33

四川/Windows/IE

回复

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

江苏/Windows/Chrome

回复

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

广东/Windows/Chrome

回复

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

浙江/Windows/Firefox

回复

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

山东/Windows/IE

回复

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

浙江/Windows/Chrome

回复

不错哦
搜搜 09-04 23:57

浙江/Windows/Chrome

回复

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

广东/Windows/Chrome

回复

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

北京/Windows/Firefox

回复

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

上海/Windows/IE

回复

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

上海/Windows/IE

回复

还是没有哇，看来要再水一点儿，但是不要过分了，嘎。 :lol:
1. 冰剑博主 10-15 11:41
  
  湖南/Windows/Firefox
  
  回复
  
  欢迎继续水，哇哈哈。。
  是JQ的效果，嘿嘿。
拆墙部队 10-14 16:58

上海/Windows/IE

回复

嘿，话说这个留言这里是用的 JS（JQ）做的么？还带滑动的！
默玉 11-14 23:36

陕西/Windows

回复

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

浙江/Windows/Chrome

回复

酷～
1. 冰剑博主 12-03 20:26
  
  湖南/Windows/Firefox
  
  回复
  
  晕，早没效果了，哪来的酷。
  1. 林木木 12-03 21:26
    
    浙江/Windows/Chrome
    
    回复
    
    不是图还在嘛～
    
    冰剑博主 12-03 23:02
    
    湖南/Windows/Firefox
    
    回复
    
    看图自己想象效果，呵呵。
小松 12-10 16:00

浙江/Windows/Firefox

回复

很好玩~
evbby 10-10 00:04

重庆/Windows/Chrome

回复

我试试效果，呵呵！

动态 +1 效果

评论

留下一条评论