jquery插件之图片show and hide(一)

一、效果图：

tips:源码下载：https://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>