以下是 jquery视频影音图文列表展示特效代码 的示例演示效果:
部分效果截图:
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 type="text/css" rel="stylesheet" href="css/album.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/album.js"></script>
</head>
<body>
<div id="album_show">
<ul>
<!--Start -->
<li class="expand">
<a href="javascript:void(0)" class="album_img"><img src="images/50819.jpg" /></a>
<ul>
<li class="level"><div class="level_5"></div></li>
<li>
今日排名:
<span class="rank">25</span>
<img class="icon_up"></img>
</li>
<li>
今日人气指数:
<span class="rank">2552</span>
</li>
<li>
<a class="btn_enter" title="" href="">去串串门</a>
</li>
</ul>
<p class="album_title">
<a href="" class="title_a"></a><span class="title_dash">-</span>
<a href="" class="title_b">网页特效</a>
</p>
</li>
<!-- End -->
<li class="shrink">
<a href="javascript:void(0)" class="album_img"><img src="images/50819.jpg" /></a>
<ul>
<li class="level"><div class="level_5"></div></li>
<li>
今日排名:
<span class="rank">25</span>
<img class="icon_up"></img>
</li>
<li>
今日人气指数:
<span class="rank">2552</span>
</li>
<li>
<a class="btn_enter" title="" href="">去串串门</a>
</li>
</ul>
<p class="album_title">
<a href="" class="title_a"></a><span class="title_dash">-</span>
<a href="" class="title_b">图片特效</a>
</p>
</li>
<li class="shrink">
<a href="javascript:void(0)" class="album_img"><img src="images/50819.jpg" /></a>
<ul>
<li class="level"><div class="level_5"></div></li>
<li>
今日排名:
<span class="rank">25</span>
<img class="icon_up"></img>
</li>
<li>
今日人气指数:
<span class="rank">2552</span>
</li>
<li>
<a class="btn_enter" title="" href="">去串串门</a>
</li>
</ul>
<p class="album_title">
<a href="" class="title_a"></a><span class="title_dash">-</span>
<a href="" class="title_b">jquery插件</a>
</p>
</li>
<li class="shrink">
<a href="javascript:void(0)" class="album_img"><img src="images/50819.jpg" /></a>
<ul>
<li class="level"><div class="level_5"></div></li>
<li>
今日排名:
<span class="rank">25</span>
<img class="icon_up"></img>
</li>
<li>
今日人气指数:
<span class="rank">2552</span>
</li>
<li>
<a class="btn_enter" title="" href="">去串串门</a>
</li>
</ul>
<p class="album_title">
<a href="" class="title_a"></a><span class="title_dash">-</span>
<a href="" class="title_b">flash特效</a>
</p>
</li>
<li class="shrink">
<a href="javascript:void(0)" class="album_img"><img src="images/50819.jpg" /></a>
<ul>
<li class="level"><div class="level_5"></div></li>
<li>
今日排名:
<span class="rank">25</span>
<img class="icon_up"></img>
</li>
<li>
今日人气指数:
<span class="rank">2552</span>
</li>
<li>
<a class="btn_enter" title="" href="">去串串门</a>
</li>
</ul>
<p class="album_title">
<a href="" class="title_a"></a><span class="title_dash">-</span>
<a href="" class="title_b">来吧</a>
</p>
</li>
</ul>
<div style="clear:both" />
</div>
<br>
</body>
</html>
JS代码(album.js):
(function($){
$().ready(function(){
$("#album_show").find(".btn_enter").hover(function(){
$(this).addClass("mOut");
}
,function(){
$(this).removeClass("mOut");
}
)$("#album_show").find(".album_img").hover(function(){
$("#album_show>ul>li").attr("class","shrink");
$(this).css("background","#E6E6E6");
$(this).parent().attr("class","expand");
}
,function(){
$(this).css("background","#FFF");
}
)}
)}
)(jQuery)CSS代码(album.css):
#album_show{font-size:12px;background:#EEE;padding:20px;}
#album_show a{text-decoration:none;color:#000;}
#album_show img{border:none;}
#album_show ul{list-style:none;margin:0;}
#album_show span.rank{color:#CD1900;}
#album_show .icon_up{background:url(../images/icon_state.gif) no-repeat;width:9px;}
#album_show .icon_down{background:url(../images/icon_state.gif) 0 -14px no-repeat;width:9px;}
#album_show .icon_stay{background:url(../images/icon_state.gif) 0 -26px no-repeat;width:9px;}
#album_show a.album_img{padding:3px;width:70px;height:70px;border:1px solid #AAA;display:block;background:#FFF;float:left;}
#album_show .btn_enter{background:url(../images/enter.gif) no-repeat;width:74px;height:16px;line-height:18px;overflow:hidden;display:block;color:#FFF;text-indent:20px;}
#album_show .mOut{background:url(../images/enter.gif) 0 -16px no-repeat;width:74px;height:16px;display:block;color:#FFF;line-height:18px;text-indent:20px;}
#album_show li{margin:0 8px;}
#album_show li ul{margin-left:46px;*margin-left:86px;}
#album_show li ul:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
#album_show li li{height:21px;}
#album_show li.level div{width:100px;height:15px;}
#album_show div.level_1{background:url(../images/star_combine.gif) 0 -60px no-repeat;}
#album_show div.level_2{background:url(../images/star_combine.gif) 0 -45px no-repeat;}
#album_show div.level_3{background:url(../images/star_combine.gif) 0 -30px no-repeat;}
#album_show div.level_4{background:url(../images/star_combine.gif) 0 -15px no-repeat;}
#album_show div.level_5{background:url(../images/star_combine.gif) no-repeat;}
#album_show .expand{width:218px;height:107px;float:left;margin-top:-10px;}
#album_show .expand{background:url(../images/bg_01.gif);padding:10px 0 0 8px;}
#album_show .expand .album_title{clear:both;font-size:13px;height:18px;background:url(../images/icon_01.gif) no-repeat;padding:1px 0 0 20px;margin:0;}
#album_show .expand a.title_a{font-weight:bold;display:block;height:14px;width:90px;overflow:hidden;float:left;}
#album_show .expand a.title_a:hover{text-decoration:underline;}
#album_show .expand a.title_b{color:#CA1A00;font-weight:bold;display:block;height:14px;width:90px;overflow:hidden;float:left;}
#album_show .expand a.title_b:hover{text-decoration:underline;}
#album_show .expand .title_dash{float:left;display:block;margin-right:5px;}
#album_show .shrink{width:75px;height:117px;float:left;}
#album_show .shrink ul{display:none;}
#album_show .shrink .album_title{margin-top:84px;_margin-top:8px;}
#album_show .shrink .album_title a{display:block;overflow:hidden;height:14px;text-align:center;margin-top:2px;}
#album_show .shrink .album_title a:hover{text-decoration:underline;}
#album_show .shrink .title_dash{display:none;}
分享到QQ
分享到微博
微信扫一扫
