日历存档: 2011 年 6 月 21 日

页面载入中……

分类：折腾日期：2011-06-21 - 21:34:35评论：10条作者：老谢

现在感谢@无冷大湿的帮忙，我的页面加载效果搞定了…

首先在header.php加入两个代码

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"><!--mce:0--></script>
<script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/js/load_page.js" type="text/javascript"><!--mce:1--></script>

load_page.js的代码

jQuery(document).ready(function($){
$('.title h2').one("click",function(){
        var Url=$(this).find('a').attr('href');
        $(this).empty().append('<span>页</span><span>面</span><span>载</span><span>入</span><span>中</span><span>·</span><span>·</span><span>·</span><span>·</span><span>·</span><span>·</span>');
        load_ani();
        setInterval(load_ani,1200);
        window.location = Url;
        return false;
    })
    function load_ani(){
        var FUNC=[
            function(){$('.title h2').children('span').eq(0).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(1).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(2).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(3).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(4).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(5).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(6).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(7).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(8).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(9).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(10).delay(100).show(0,aniCallBack);},
            function(){$('.title h2 span').hide(0);}
        ];
        var aniCallBack=function() {
            $(document).dequeue("ani_list");
        }
        $(document).queue("ani_list",FUNC);
        aniCallBack();
    }
})

css里面加入

.post-title span{display:none;}

完事大吉了，啥也不说了，非常感谢无冷大湿。。！

ps:为了使效果更完美，@无冷给建议给title定义高度，css样式如下：

.title{height:24px}
.post .title h2 {height:24px}

<h1>这是一级标题</h1> 效果相当于30像素的粗体字

<h2>这是二级标题</h2> 效果相当于24像素的粗体字

<h3>这是三级标题</h3> 效果相当于18像素的粗体字

<h4>这是四级标题</h4> 效果相当于16像素的粗体字

<h5>这是五级标题</h5> 效果相当于13像素的粗体字

<h6>这是六级标题</h6> 效果相当于10像素的粗体字

Tags:

wordpress读者墙血条版-感谢无冷大湿

分类：折腾日期：2011-06-21 - 19:53:02评论：32条作者：老谢

参考地址：http://icold.me/readerswall-blood/

今天把读者墙折腾出来了，演示http://www.xj123.info/readerswall

感谢@无冷大湿

css部分如下：

#readerswall li{width:40px;height:46px;margin:0 10px 10px 0;padding:5px;
float:left;list-style:none;border: 1px solid #DFDFDF;
-moz-border-radius:2px;-khtml-border-radius: 2px;
-webkit-border-radius: 2px;border-radius: 2px;}
#readerswall img{width:40px;height:40px;display:block;}
#readerswall .active-bg{width:40px;height:2px;_font-size:0;margin-top:5px;background:#DFDFDF; }
#readerswall .active-degree{background:#08c;width:40px;height:2px;_font-size:0;}

 

页面模板代码：

<?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 24 MONTH ) AND user_id='0' AND comment_author_email != '这里填admin的email，不显示该email的头像' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 40";//最后的这个40是选取多少个头像，我一次让它显示40个。
    $wall = $wpdb->get_results($query);
    $maxNum = $wall[0]->cnt;
    foreach ($wall as $comment) 
    {
        $width = round(40 / ($maxNum / $comment->cnt),2);//这个40是我设置头像的宽度，和下面&size=40里的40一个概念，如果你头像宽度32，这里就是32了。
        if( $comment->comment_author_url ) 
        $url = $comment->comment_author_url;
        else $url="#";
        $tmp = "<li title='".$comment->comment_author." (".$comment->cnt."次重要讲话)' num='".$comment->cnt."'><a href='".$comment->comment_author_url."' target='_blank'><img src='http://www.gravatar.com/avatar.php?gravatar_id=".md5($comment->comment_author_email)."&size=40&d=identicon&r=G' alt='" . $comment->comment_author . " (". $comment->cnt . "层楼)' /></a><div class='active-bg'><div class='active-degree' style='width:".$width."px'></div></li>";
        $output .= $tmp; 
     }
    $output = "<div id='readerswall'><h2>Most Active Friends</h2><ul class='gavaimg'>".$output."</ul></div>";
    echo $output ;
?>

把页面模板上传到主题目录，然后建立一个页面，选择上传的模板

wordpress读者墙血条版-感谢无冷大湿

大功告成了，看看效果吧

Tags: