jQ鼠标悬停图片上滑动显示说明js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQ鼠标悬停图片上滑动显示说明js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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鼠标悬停图片上滑动显示说明</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".imgtext").hide();
 $(".zzsc").hover(function(){
  $(".imgtext",this).slideToggle(500);
 });
});
</script>
</head>

<body>
<div class="zzsc"><a href="#" target="_blank"><img src="images/zzsc.jpg"></a>
  <div class="text">
    <div class="imgtext"> 2012新品男T恤韩版短袖男士夏装男装翻领t恤POLO衫 货到付款 T93 </div>
  </div>
</div>
</body>
</html>

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;}
img{border:none;}
.zzsc{width:300px;height:300px;margin:auto;position:relative;}
.text{width:300px;height:auto;background-color:#000;FILTER:alpha(opacity=60);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;}
.imgtext{width:280px;height:auto;float:left;padding:10px;color:#fff;font-size:12px;line-height:200%;}

附件:下载该文件资源,减少时间成本(增值服务)