首页 » 建站技术 » WordPress » 浏览内容

JQuery实现滚动读者墙效果


2010-12-27 01:33:06 3,353 0 发表评论 字体: 作者:C.K.
标签: JqueryWordPress

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

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

效果:

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

PHP代码:

<div id="scrollbox">
  • <?php $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url,
  • comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts
  • ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub
  • ( NOW(), INTERVAL 1 MONTH ) AND user_id='0' AND comment_author_email != 'your-email'
  •  AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP
  •  BY comment_author_email ORDER BY cnt DESC LIMIT 13";
  • $wall = $wpdb->get_results($query);
  • foreach ($wall as $comment)
  • {
  • if( $comment->comment_author_url )
  • $url = $comment->comment_author_url;
  • else $url="#";
  • $tmp = "<li><a rel='external nofollow' href='".$url."'
  • title='".$comment->comment_author." (".$comment->cnt.")'>".get_avatar
  • ($comment->comment_author_email, 40)."</a></li>";
  • $output .= $tmp;
  • }
  • $output = "<ul>".$output."</ul>";
  • echo $output ;
  • ?>
  • </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 代码:

    function scrollBox(){
  • var first = $('#scrollbox ul li:first');
  • var width = -(first.outerWidth(true)) + 'px';
  • $('#scrollbox ul').animate({left:width},{
  • duration:600,
  • complete:function(){
  • $('#scrollbox ul').append(first).css("left","0");
  • }
  • });
  • };
  • $(document).ready(function(){
  • myScroll = setInterval(scrollBox,1500);
  • $('#scrollbox').hover(function(){
  • clearInterval(myScroll);
  • },function(){
  • myScroll = setInterval(scrollBox,1500);
  • });
  • })
  • $('#wp-rc-reply .rc_comment').live('dblclick', function() {
  • $(this).find('.rc_reply_btn').click();
  • $("#rc_comment").focus();
  • });
  • 注:实现加载该JS代码,可以创建个新的文件scrollwall.js并把上面的代码复制到其中,然后上传
    到服务器上,至于调用,可以在header.php文件中添加如下代码:

    <script type='text/javascript'
  • src='http://博客地址/上传的目录地址/scrollwall.js'></script>
  • CSS代码:
  • #scrollbox{width:500px;height:45px;position:relative;background-color:#fff;
  • overflow:hidden;margin-bottom:3px;border:1px solid #b6b6b6;}
  • #scrollbox ul {width:600px;height:45px;position:absolute;padding:1px0;}
  • #scrollbox li {list-style:none;float:left;margin:0 0 12px 9px;}
  • 注:加到主题的style.css文件中,可以根据自己的主题再做CSS调整

    网站统计 Statistics

    • 创建时间: 2005年1月3日 距今5066 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14166749 位访客

    广告区 Guǎng Gào