JQuery实现滚动读者墙效果

林继 WordPress 3,352 共写了694个字 (2010-12-27 1:33:06) 没有评论 打印 扫描二维码 百度已收录

首先,大家是不是在文章的最下面看到一排滚动的读者的头像,这个就是传说中的“滚动”读者墙效果,话说小石头为了实现这个效果折腾了很久,一开始是可以显示头像,但是头像不滚动,以为是没有加载JS成功,后来经过不断地调试和探索,最终还是被小石头搞定了,原因竟然是WordPress自带的jquery库的版本不兼容此功能,估计版本太低了,所以用一个新版本Jquery库覆盖WordPress自带的jquery库。

效果:

以下代码是参考Heson博客的。

PHP代码:

  1. <div id="scrollbox">
  2. <?php $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url,
  3. comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts
  4. ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub
  5. ( NOW(), INTERVAL 1 MONTH ) AND user_id='0' AND comment_author_email != 'your-email'
  6.  AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP
  7.  BY comment_author_email ORDER BY cnt DESC LIMIT 13";
  8. $wall = $wpdb->get_results($query);
  9. foreach ($wall as $comment)
  10. {
  11. if( $comment->comment_author_url )
  12. $url = $comment->comment_author_url;
  13. else $url="#";
  14. $tmp = "<li><a rel='external nofollow' href='".$url."'
  15. title='".$comment->comment_author." (".$comment->cnt.")'>".get_avatar
  16. ($comment->comment_author_email, 40)."</a></li>";
  17. $output .= $tmp;
  18. }
  19. $output = "<ul>".$output."</ul>";
  20. echo $output ;
  21. ?>
  22. </div>

注:(可以放到主题中的single.php文件中)

1.把上面代码中的your-email改为博主自己的邮箱地址,来排除显示自己的头像
2.活跃时间,代码中的comment_date > date_sub( NOW(), INTERVAL 1 YEAR)是一年中最活跃的用户,可以把时间year修改成季(SEASON),月(MONTH),周(WEEK)
3.点击滚动中的头像,默认是在本窗口打开,若想在新的窗口中打开,可以在代码a rel=’external nofollow’后添加target=’_blank’即可。

Jquery 代码:

  1. function scrollBox(){
  2. var first = $('#scrollbox ul li:first');
  3. var width = -(first.outerWidth(true)) + 'px';
  4. $('#scrollbox ul').animate({left:width},{
  5. duration:600,
  6. complete:function(){
  7. $('#scrollbox ul').append(first).css("left","0");
  8. }
  9. });
  10. };
  11. $(document).ready(function(){
  12. myScroll = setInterval(scrollBox,1500);
  13. $('#scrollbox').hover(function(){
  14. clearInterval(myScroll);
  15. },function(){
  16. myScroll = setInterval(scrollBox,1500);
  17. });
  18. })
  19. $('#wp-rc-reply .rc_comment').live('dblclick', function() {
  20. $(this).find('.rc_reply_btn').click();
  21. $("#rc_comment").focus();
  22. });

注:实现加载该JS代码,可以创建个新的文件scrollwall.js并把上面的代码复制到其中,然后上传
到服务器上,至于调用,可以在header.php文件中添加如下代码:

  1. <script type='text/javascript'
  2. src='http://博客地址/上传的目录地址/scrollwall.js'></script>
  3. CSS代码:
  4.  
  5. #scrollbox{width:500px;height:45px;position:relative;background-color:#fff;
  6. overflow:hidden;margin-bottom:3px;border:1px solid #b6b6b6;}
  7. #scrollbox ul {width:600px;height:45px;position:absolute;padding:1px0;}
  8. #scrollbox li {list-style:none;float:left;margin:0 0 12px 9px;}

注:加到主题的style.css文件中,可以根据自己的主题再做CSS调整

历史上的今天

12月
27

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >