html+css+jQuery实现文字标签云

1、新建html文档。

2、书写hmtl代码。

<div class="da_div">

 <div class="boxgrid caption">111111111

  <div class="boxcaption cover">

   <a href="#" target="_blank">111111111111111111111111111</a>

  </div>

 </div>

 <div class="boxgrid  boxgrid2 caption"> 111111111

  <div class="boxcaption boxcaption2 cover">

   <a href="#" target="_blank">111111111111111111111111111</a>

  </div>

 </div>

 <div class="boxgrid boxgrid3 caption"> 111111111

  <div class="boxcaption boxcaption2 cover">

   <a href="#" target="_blank">111111111111111111111111111</a>

  </div>

 </div>

 <div class="boxgrid  boxgrid2 reci caption"> 111111111

  <div class="boxcaption boxcaption2 cover">

   <a href="#" target="_blank">111111111111111111</a>

  </div>

 </div>

 <div class="boxgrid reci2 caption"> 111111111

  <div class="boxcaption cover">

   <a href="#" target="_blank">111111111111111111</a>

  </div>

 </div>

 <div class="boxgrid boxgrid2 reci2 caption"> 111111111

  <div class="boxcaption boxcaption2 cover">

   <a href="#" target="_blank">111111111111111111</a>

  </div>

 </div>

</div>

3、书写css代码。

<style>

* { padding: 0px; margin: 0px; list-style-type: none; }

body { background: #D5DEE7; }

.da_div { width: 306px; margin: 20px auto; height: 110px; overflow: hidden; background: #fff; padding: 5px 5px 0px 5px; }

.boxgrid { width: 120px; height: 40px; float: left; background: #125ccb; overflow: hidden; position: relative; color: #fff; font-size: 14px; font-family: "微软雅黑"; text-align: center; padding: 5px }

.boxgrid2, .boxgrid3 { width: 72px; margin-left: 6px; background: #17a2b7; }

.boxgrid3 { background: #125ccb; }

.boxcaption { float: left; position: absolute; background: #000; height: 60px; opacity: .9;/* For IE 5-7 */ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);/* For IE 8 */

-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; top: 50px; left: 0; padding: 5px; width: 120px; }

.boxcaption2 { width: 82px; padding: 0; }

.boxcaption p { color: #fff; line-height: normal; font-size: 15px; position: relative; z-index: 999; }

.boxcaption p a { color: #fff; }

.reci { margin-left: 0; margin-top: 5px; }

.reci2 { margin-left: 6px; margin-top: 5px; }

</style>

4、书写并添加js代码。

<script src="js/jquery-1.3.1.js"></script>

<script >

$(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>

5、代码整体结构。

6、查看效果