类似tudou播放清单列表展示

2010-09-20 12:00:05 by 【6yang】, 199 visits, 收藏 | 返回

<!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>类似tudou播放列表展示</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".pic").hover(function(){
$(".scroll").stop(true).animate({top:'-=100'},"fast");
},function(){
$(".scroll").stop(true).animate({top:'+=100'},"fast");
})
})
</script>
<style type="text/css">
h4,p{margin:0; padding:0;}
h4{font-size:14px; line-height:30px;}
span{font-size:12px; font-weight:normal; float:right; padding-right:10px;}
p{line-height:30px; font-size:12px; font-weight:normal;}
a{color:#FF0; text-decoration:none;}
a:hover{color:#0F0; text-decoration:underline;}
.pic{width:280px; height:130px; border:4px solid #000; margin:30px auto 0; position:relative; overflow:hidden;}
.scroll{width:280px; height:130px; background:#000; opacity:0.8; filter:Alpha(opacity=80); position:absolute; left:0; top:100px; color:#FFF; padding:0 5px;}

</style>
</head>

<body>

<div class="pic">
   <img src="images/ps.jpg" width="280" height="130" alt="" />
   <div class="scroll">
      <h4><span>2010-9-20</span>美丽的瀑布崽</h4>
      <p>这里可以写一些风景的介绍信息之类的布局根据个人需要来写撒</p>
      <p>Power by <a href="http://www.qsgoo.com">qsgoo.com</a></p>
   </div>
</div>

</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=810&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

类似tudou播放清单列表展示

图片原图