| 代码如下 | 复制代码 |
| <!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> <title>鼠标悬停向上滑动显示说明的图片展示效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> .chaonanwo{width:300px;height:300px;margin:auto;position:relative;} .chaonanwo img{width:300px;height:300px;border:0px;display:block;} .text{width:300px;height:auto;background-color:#FFFFFF;FILTER:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7;position:absolute;left:0px;bottom:0px;} .imgbt{width:280px;height:30px;padding:0px 10px;} .imgbt span{display:block;} .span_a{width:210px;line-height:30px;float:left;font-size:14px;color:#FF3366;padding-right:10px;} .span_b{width:60px;line-height:30px;float:left;font-size:16px;color:#FF3366;font-family:Georgia,"Times New Roman",Times,serif;text-align:right;} .clear{display:block;font-size:0px;height:0px;line-height:0px;clear:both;} .imgtext{width:280px;height:80px;padding:20px 10px;color:#333333;font-size:12px;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".imgtext").hide(); $(".chaonanwo").hover(function(){ $(".imgtext").slideToggle(1000); }); }); </script> </head> <body> 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。</br> <!--把下面代码加到<body>与</body>之间--> <div class="chaonanwo"> <a href="#" target="_blank"><img src="/52200/96800d34976cfe2660b941d293d19b273658Rd_468x468.jpg"></a> <div class="text"> <div class="imgbt"> <span class="span_a">韩版短翻领POLO衫</span> <span class="span_b">￥59.00</span> <span class="clear"></span> </div> <div class="imgtext"> 2012新品男T恤韩版短袖男士夏装男装翻领t恤POLO衫 货到付款 T93 </div> </div> </div> </body> </html> |
|
时间： 2024-10-26 15:05:02