jQuery开发的热搜词文字标签云模板代码

文
章
目
录

jQuery开发的metro风格热搜词文字标签云模板代码，蓝色色调，矩形文字，鼠标放上去有遮挡效果，效果不错。这也是一款仿百度新闻热搜词的特效，可用于图片或文字钢琴jquery效果。

效果

核心代码

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.caption').hover(function(){
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
    }, function() {
        $(".cover", this).stop().animate({top:'50px'},{queue:false,duration:300});
    });
});
</script>
        
</head>
<body>

<div class="da_div">
    <div class="boxgrid caption">
        欢迎加入中国食用菌商务网
        <div class="boxcaption cover">
            <p><a href="#" target="_blank">欢迎加入中国食用菌商务网</a></p>
        </div>
    </div>
    
    <div class="boxgrid  boxgrid2 caption">
        查看食用菌行情
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">查看食用菌行情</a></p>
        </div>
    </div>
    
    <div class="boxgrid boxgrid3 caption">
        最新买卖求购信息
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">最新买卖求购信息</a></p>
        </div>
    </div>    

    <div class="boxgrid  boxgrid2 reci caption">
        冬季食用菌保暖知识
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">冬季食用菌保暖知识</a></p>
        </div>
    </div>
    
    <div class="boxgrid reci2 caption">
        欢迎订阅食用菌市场杂志
        <div class="boxcaption cover">
            <p><a href="#" target="_blank">欢迎订阅食用菌市场杂志</a></p>
        </div>
    </div>
    
    <div class="boxgrid boxgrid2 reci2 caption">
        打造食用菌品牌
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">打造食用菌品牌</a></p>
        </div>
    </div>

</div>