首页 新闻 搜索 专区 学院

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>
Ganler1988的主页 Ganler1988 | 初学一级 | 园豆:3
提问于:2013-07-16 11:29
< >
分享
最佳答案
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
三国灰鼠 | 菜鸟二级 |园豆:251 | 2013-07-16 11:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册