有些网页上的图片鼠标掠过之后就会有一个黑色半透明的幕布一样从上面下来，请问这是怎么实现的啊？求代码
展开全部
相对定位层，和相对位置的变化
<DIV style="POSITION: relative; MARGIN: 0px 10px 0px 0px; WIDTH: 280px; FLOAT: left; HEIGHT: 200px; OVERFLOW: hidden" id=div1>
<IMG style="WIDTH: 280px; HEIGHT: 200px" src="images/sss.jpg">
<DIV style="POSITION: absolute; FILTER: alpha(opacity=50); BACKGROUND-COLOR: black; WIDTH: 280px; HEIGHT: 200px; TOP: -200px; LEFT: 0px; -moz-opacity: 0.5; opacity: 0.5"
id=div2></DIV>
</DIV>
$(function() {
$("#div1").mouseover(function() {
$("#div2").stop().animate({ top: 0 }, 100, function() { //动画之后执行的函数 });
}).mouseout(function() {
$("#div2").stop().animate({ top: -200 }, 100, function() { //动画之后执行的函数 });
});
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".imgtext").hide();
$(".chaonanwo").hover(function(){
$(".imgtext").slideToggle(1000);
});
});
</script>
<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>
</head>
<body>
<div class="chaonanwo">
<a href="test.php" target="_blank"><img src="http://gi1.md.alicdn.com/bao/uploaded/i1/12865025544565699/T1qEd0Fl0dXXXXXXXX_!!0-item_pic.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" style="display: none;">
2012新品男T恤韩版短袖男士夏装男装翻领t恤POLO衫 货到付款 T93
</div>
</div>
</div>
</body></html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".imgtext").hide();
$(".chaonanwo").hover(function(){
$(".imgtext").slideToggle(1000);
});
});
</script>
<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>
</head>
<body>
<div class="chaonanwo">
<a href="test.php" target="_blank"><img src="http://gi1.md.alicdn.com/bao/uploaded/i1/12865025544565699/T1qEd0Fl0dXXXXXXXX_!!0-item_pic.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" style="display: none;">
2012新品男T恤韩版短袖男士夏装男装翻领t恤POLO衫 货到付款 T93
</div>
</div>
</div>
</body></html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
