一、效果图:
tips:源码下载:http://files.cnblogs.com/waitingbar/orderlist.rar
二、jquery源码:
(function($){
//扩展这个方法到jquery;
$.fn.extend({
//将可选择的变量传递给方法
slide_show_hide: function(options) {
//参数和默认值
var defaults = {
//big_id_order_bar:'div_order_con_bar',
//show_order_class:'order_img_bar',
over_order_class:'.order_list'
};
var options = $.extend(defaults, options);
//遍历匹配元素的集合
return this.each(function() {
var o =options;
//$(this)为元素集合
//show_hide_items为元素对象;
var show_hide_items = $(o.over_order_class,$(this));
//添加hover()事件
show_hide_items.hover(function(){
show_hide_items.find("div").hide();
$(this).find("div").show();
// $("#" + o.big_id_order_bar + " ." + o.show_order_class).hide(0);
// $("#" + o.big_id_order_bar + " #"+ $(this).attr("id") + " ." + o.show_order_class).slideDown(0);
});
});
}
});
})(jQuery);
三、HTML:
<script language="javascript">
/*
*说明:
*big_id_order_bar:为最外层id;
*over_order_class 参数为:经过某最外层的class,带'.'传进来;
*show_order_class:作用层所在的class名
*/
$(document).ready(function() {
$("#testxxx_bar").slide_show_hide();
});
</script><!--start of 排名列表-->
<div class="name_list_bar">
<ul class="ul_order_tit">
<li class="li_order_num li_order_tit_num">排名</li>
<li class="li_order_name li_order_tit_name">游戏名称</li>
<li class="li_order_ticket li_order_tit_ticket">票数</li>
</ul>
<div id="testxxx_bar">
<div class="testxxx_class">
<ul class="ul_order_con">
<li class="li_order_num">1</li>
<li class="li_order_name"><a target="_blank" href="#">地下城与勇士</a></li>
<li class="li_order_ticket">1244</li>
</ul>
<div class="testxxx"><a href="#"><img src="images/demoimg/1.jpg" /></a></div>
</div>
<div class="testxxx_class">
<ul class="ul_order_con">
<li class="li_order_num">2</li>
<li class="li_order_name"><a target="_blank" href="#">穿越火线</a></li>
<li class="li_order_ticket">1181</li>
</ul>
<div class="testxxx undis"><a href="#"><img src="images/demoimg/2.jpg" /></a></div>
</div>
<div class="testxxx_class">
<ul class="ul_order_con">
<li class="li_order_num">3</li>
<li class="li_order_name"><a target="_blank" href="#">神魔大陆</a></li>
<li class="li_order_ticket">911</li>
</ul>
<div class="testxxx undis"><a href="#"><img src="images/demoimg/10.jpg" /></a></div>
</div>
</div>
<div class="clear"></div>
</div>
<!--end of 排名列表—>
四、css样式:
<style>
body { font-faminly:"微软雅黑","Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif; font-size:12px;}
*{ padding:0; margin:0;}
img { border:0;}
.clear { clear:both;}
a { color:#000; text-decoration:none;}
a:hover { color:#EC6104; text-decoration:none;}
.undis { display:none;}
.name_list_bar { width:220px; border:1px solid #C5D7DF; padding-bottom:5px;}
.ul_order_con { list-style:none; clear:both; line-height:24px; height:24px;font-family:Arial;}
.li_order_num,
.li_order_name,
.li_order_ticket {float:left; overflow:hidden; white-space:nowrap;word-break:keep-all;}
.li_order_num {
background:url(../images/oder_list/uloderbg.gif) no-repeat 9px 3px;
color:#fff;
padding-right:5px;
text-align:center;
width:35px;
}
.li_order_name { width:120px;}
.li_order_ticket { width:60px; text-align:center;}
.ul_order_tit {list-style:none; margin-bottom:5px; clear:both; font-family:Arial; line-height:30px; height:30px; font-size:14px; border-bottom:1px solid #C5D7DF; }
.li_order_tit_name { text-align:center;}
.li_order_tit_num {background:none;color:#000;}
.testxxx { margin-left:40px;}
.testxxx img{ width:165px; height:100px;}
</style>