jQuery metro风格的文字标签
浏览数：37 /
时间：2015年06月09日
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery metro风格的文字标签</title> <style type="text/css"> *{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> <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> <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> </div> </body> </html>
demo：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
