网站tag标签属性原理与jquery特效分析

特效：

 

代码：

 　　　　1：html代码：

　　　　

.tag-cloud .tag {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 1px 4px;
  font-size: 12px;
  margin: 0 5px 4px 0;
  color: #FFF;
  white-space: nowrap;
}
.tag-1 {
  background-color: #ffaa01;
}
.tag-1:hover,
.tag-1:active {
  background-color: #cd8800;
}
.tag-2 {
  background-color: #bfd671;
}
.tag-2:hover,
.tag-2:active {
  background-color: #adcb49;
}
.tag-3 {
  background-color: #8ed1e0;
}
.tag-3:hover,
.tag-3:active {
  background-color: #66c1d5;
}
.tag-4 {
  background-color: #c098d3;
}
.tag-4:hover,
.tag-4:active {
  background-color: #aa74c4;
}
.tag-5 {
  background-color: #f29c9f;
}
.tag-5:hover,
.tag-5:active {
  background-color: #ec6f73;
}
.tag-6 {
  background-color: #88abda;
}
.tag-6:hover,
.tag-6:active {
  background-color: #6190ce;
}
.tag-7 {
  background-color: #89c997;
}
.tag-7:hover,
.tag-7:active {
  background-color: #66b978;
}

<div class="box box-side box-news-index news-index-tagCloud">
    
    <div class="boxs-title">
        <h4>最近搜索</h4>
    </div>
        <div class="conleftbox" style="background-color: #FFFFFF;">
            {foreach from=last_search() key=key name=pro_num item=val}
            <a href="/keyword/{$val.filename}.html" target="_blank" class="" style="color: #FFFFFF;">{$val.keyword}</a>&nbsp;
            {/foreach}
        </div>
        <script>
            $(document).ready(function(){
                var a = $(".conleftbox a").length;

                for(var i=0;i<a;i++){
                    if(i%3==0){
                        $(".conleftbox a").eq(i).addClass("tag tag-2");
                    }else if(i%5==0){
                        $(".conleftbox a").eq(i).addClass("tag tag-4");
                    }else if(i%7==0){
                        $(".conleftbox a").eq(i).addClass("tag tag-6");
                    }else if(i%9==0){
                        $(".conleftbox a").eq(i).addClass("tag tag-7");
                    }else if(i%11==0){
                        $(".conleftbox a").eq(i).addClass("tag tag-1");
                    }else if(i%4){
                        $(".conleftbox a").eq(i).addClass("tag tag-3");
                    }else{
                        $(".conleftbox a").eq(i).addClass("tag tag-5");
                    }
                }
            });
        </script>
    
</div>

 

2：php代码：

function hot_search($label_num = 11){
    static $res = NULL;

    if ($res === NULL)
    {
        $data = read_static_cache('hot_search');
        if ($data === false)
        {
            $res = $GLOBALS['db']->getAll("SELECT keyword,filename FROM " . $GLOBALS['ecs']->table('keywords') . " WHERE is_show = '1' and searchengine = 'ecshop' and length(keyword)<=40 ORDER BY RAND() LIMIT 0,99");
            write_static_cache('hot_search', $res);
        }
        else
        {
            $res = $data;
        }
    }
    $tempArr = array();
    $labelArr = array();

    if ( $label_num ){
        $tempArr = @array_rand($res,$label_num);//随机取出二维数组的键

        if(is_array($tempArr)){
            foreach ( $tempArr as $value ){
                $labelArr[] = $res[$value];
            }
        }
    }
    unset($res,$tempArr);
    return $labelArr;
}

function last_search()
{
    return hot_search(33);
}