css 实现图片说明 仿百度
0
悬赏园豆：5
[已解决问题]
解决于 2013-07-16 12:24
http://xiangce.baidu.com/plaza css 实现图片说明 仿百度 不知道这个效果怎么做 我写了一个 不过很奇葩 求大神赐教
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <!-- 6 /** 7 * Created by JetBrains WebStorm. 8 * User: Ganler 9 * Date: 13-7-1 10 * Time: 上午9:17 11 * To change this template use File | Settings | File Templates. 12 */ 13 --> 14 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 15 <script type="text/javascript" src="js/jquery-1.7.1.js"></script> 16 <script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script> 17 <title></title> 18 <style type="text/css"> 19 .boss { 20 width: 400px; 21 height: 200px; 22 float: left; 23 margin: 20px; 24 margin-bottom: 2px; 25 26 } 27 28 .mainimg img { 29 width: 400px; 30 height:200px; 31 cursor: pointer; 32 z-index: 2; 33 } 34 35 .menu{ 36 display: block; 37 width: 100%; 38 position: relative; 39 background-color: #000000; 40 opacity: 0.5; 41 color: white; 42 font-weight: bold; 43 line-height: 40px; 44 top: -40px; 45 height: 40px; 46 text-align: center; 47 z-index: 1; 48 } 49 </style> 50 </head> 51 <body> 52 <div class="boss"> 53 <div class="mainimg"> 54 <img src="QQ图片20130531165958.jpg"/> 55 </div> 56 <div class="menu"> 57 slksdflsdf 58 </div> 59 </div> 60 </body> 61 </html> 62 <script type="text/javascript"> 63 $(function() { 64 var list = $("body div img"); 65 $.each(list, function(index, ele) { 66 var obj = $(ele); 67 obj.hover(function() { 68 $(this).stop(true, false).animate({opacity:0.7}, 500); 69 $(this).parent().parent().find("div[class='menu']").stop(true,false).fadeIn(); 70 }, function() { 71 $(this).stop(true, false).animate({opacity:1.0}, 500); 72 $(this).parent().parent().find("div[class='menu']").stop(true,false).fadeOut(); 73 }) 74 75 }) 76 }); 77 </script>
最佳答案
0
给你一个简单的效果！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.tile{position:relative; width:240px; overflow:hidden}
.desc{background:rgba(0,0,0,0.8); color:#FFF; position:absolute; bottom:-30px; left:0; width:100%; height:30px;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(e) {
$('.tile').hover(function(){
$(this).find('.desc').animate({'bottom':0})
},function(){
$(this).find('.desc').animate({'bottom':'-30px'})
})
});
</script>
</head>
<body>
<div class="tile"><a target="_blank" href="#@"><img src="http://b.hiphotos.bdimg.com/album/scrop%3D240%3Bq%3D90/sign=e2e2a8778d1001e94a625350c83349d8/b21c8701a18b87d666514a81070828381f30fd19.jpg"></a>
<div class="desc" >1111111</div>
</div>
</body>
</html>
收获园豆：5
