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



WordPress)非跨页悬浮显示你回复之人的评论内容

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




召唤 @snowxh …我写好了！

标题很绕很绕，不过有图有真相：


真相图截自@冰剑的博客。

这种效果让我们只要轻晃鼠标就能轻松地看出某某人在回复@blabla的哪句话。JS代码如下：

<script type="text/javascript">
var id = /^#comment-/;
var at = /^@/;
$('#thecomments li p a').each(function() {
    if ($(this).attr('href').match(id) && $(this).text().match(at)) {
        $(this).addClass('atreply')
    }
});
$('.atreply').hover(function() {
    $($(this).attr('href')).clone().hide().insertAfter($(this).parents('li')).attr('id', '').addClass('tip').fadeIn(200)
},
function() {
    $('.tip').animate({
        opacity: "hide",
        top: "+=100px"
    },
    400,
    function() {
        $(this).remove()
    })
});
$('.atreply').mousemove(function(e) {
    $('.tip').css({
        left: (e.clientX + 18),
        top: (e.pageY + 18)
    })
});
</script>

然后是CSS…

#thecomments .tip {
position:absolute;
width:300px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;

-moz-box-shadow:0 4px 18px #c8c8c8;
-webkit-box-shadow:0 4px 18px #c8c8c8;

z-index:999;
background-color:#fff;
}

正如@winy所说，这段代码没有ajax过程，不能显示跨页的评论。

引用@m12的话，就是：

—————————引用分割线—————————

为什么不能跨页显示?

因为其工作原理是, 当鼠标移动到 @{username} 时在本页找到对应的评论, 并插入到评论列表中, 以绝对位置的方式显示出来. 如果评论不在本页, 找不到对象, 当然就没有后面的处理了.

—————————引用分割线结束—————————

想学更多？

下面是跃迁地址：

@yinheli :
鼠标悬浮实现显示留言内容(上)


鼠标悬浮实现显示留言内容(下)


@m12 :
跨页悬浮显示 @ 评论 (原理篇)


跨页悬浮显示 @ 评论 (代码篇)
完毕！<(￣︶￣)>







jQuery , ,

37 Comments.

  1. 我心飞翔

    Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP

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

    博主一直在研究怎么美化博客啊

    回复
  2. yetone

    Google Chrome 6.0.490.0 Google Chrome 6.0.490.0 Windows XP Windows XP

    2010/08/15 2:07 下午 on 1

    我表示我是来围观的 :evil:

    回复
  3. 阿邙

    Google Chrome 6.0.472.33 Google Chrome 6.0.472.33 Windows XP Windows XP

    2010/08/15 6:57 上午 on 1

    :grin: 也折腾起来啦~

    回复
  4. snowxh

    Firefox 3.6.8 Firefox 3.6.8 Windows Vista Windows Vista

    2010/08/15 3:07 上午 on 1

    我发现我最近的出镜率好高
    我表示灰常开心 (￣︶￣)

    回复
  5. laowi

    Google Chrome 5.0.375.126 Google Chrome 5.0.375.126 Windows 7 Windows 7

    2010/08/15 2:23 上午 on 1

    好炫的博客啊
    大爱

    回复
  6. mice

    GreenBrowser GreenBrowser Windows XP Windows XP

    2010/08/15 2:13 上午 on 1

    我表示右上角几个图标 吓到我了..

    回复
  7. 静夜燃香

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7

    2010/08/15 12:11 上午 on 1

    又刷了一遍看到效果了~~~可以mark以后热闹起来再加~~~~
    不过我没有加@的前缀儿……= =

    回复
  8. 流年

    Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP

    2010/08/14 10:50 下午 on 1

    不明真相

    回复
  9. 阿修

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7

    2010/08/14 10:06 下午 on 1

    说实话，我没看明白题目。
    不过刷墙什么的最喜欢了~~~

    回复
  10. Mucid

    Firefox 4.0b3 Firefox 4.0b3 Windows 7 Windows 7

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

    你们的变量咋这马古怪啊。。/^#comment-/

    回复
  11. 冰剑

    Firefox 3.6.4 Firefox 3.6.4 Windows 7 Windows 7

    2010/08/14 5:18 下午 on 1

    你教程也太。。。太简单了吧。。。

    回复
  12. winy

    Google Chrome 6.0.466.0 Google Chrome 6.0.466.0 Windows 7 Windows 7

    2010/08/14 4:02 下午 on 1

    不能跨页的吧？没有ajax过程，是本页的

    回复
  13. N

    Google Chrome 5.0.375.126 Google Chrome 5.0.375.126 Windows XP Windows XP

    2010/08/14 3:42 下午 on 1

    忍不住再来发一个，你又装修了，这的多少钱啊~~~ :grin:

    回复
  14. snowxh

    Firefox 3.6.8 Firefox 3.6.8 Windows Vista Windows Vista

    2010/08/14 3:36 下午 on 1

    差点忘了还要改成@blabla格式
    恩 我果然看我那个回复不爽很久了

    回复
  15. snowxh

    Firefox 3.6.8 Firefox 3.6.8 Windows Vista Windows Vista

    2010/08/14 3:34 下午 on 1

    耶- -
    啦啦啦

    回复

Leave a Reply


[ Ctrl + Enter ] 订阅评论Feed