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

一、效果图：

二、jquery源码：

01
(function($){ 

02
    //扩展这个方法到jquery; 

03
    $.fn.extend({    

04
        //将可选择的变量传递给方法 

05
        slide_show_hide: function(options) {   

06
            //参数和默认值 

07
            var defaults = {   

08
            //big_id_order_bar:'div_order_con_bar',   

09
            //show_order_class:'order_img_bar', 

10
            over_order_class:'.order_list'

11
            };   

12
            var options = $.extend(defaults, options);   

13
            //遍历匹配元素的集合 

14
            return this.each(function() { 

15
            var o =options;   

16
            //$(this)为元素集合 

17
            //show_hide_items为元素对象; 

18
            var show_hide_items = $(o.over_order_class,$(this));                     

19
            //添加hover()事件 

20
            show_hide_items.hover(function(){ 

21
                show_hide_items.find("div").hide(); 

22
                $(this).find("div").show(); 

23
                // $("#" + o.big_id_order_bar + " ." + o.show_order_class).hide(0); 

24
                // $("#" + o.big_id_order_bar + " #"+ $(this).attr("id") + " ." + o.show_order_class).slideDown(0);  

25
            }); 

26
            });   

27
        }   

28
    });   

29
})(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>


<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样式：

01
<style> 

02
  
03
body {    font-faminly:"微软雅黑","Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif; font-size:12px;}  

04
*{ padding:0; margin:0;}  

05
img { border:0;}  

06
.clear { clear:both;}  

07
a { color:#000; text-decoration:none;}  

08
a:hover { color:#EC6104;  text-decoration:none;}  

09
.undis { display:none;}  

10
  
11
.name_list_bar { width:220px; border:1px solid #C5D7DF; padding-bottom:5px;}  

12
.ul_order_con { list-style:none; clear:both; line-height:24px; height:24px;font-family:Arial;}  

13
.li_order_num,  

14
.li_order_name,  

15
.li_order_ticket {float:left; overflow:hidden; white-space:nowrap;word-break:keep-all;}  

16
.li_order_num {  

17
    background:url(../images/oder_list/uloderbg.gif) no-repeat 9px 3px;  

18
    color:#fff;  

19
    padding-right:5px;  

20
    text-align:center;  

21
    width:35px;  

22
}  

23
.li_order_name { width:120px;}  

24
.li_order_ticket { width:60px; text-align:center;}  

25
.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; }  

26
.li_order_tit_name { text-align:center;}  

27
.li_order_tit_num {background:none;color:#000;}  

28
  
29
.testxxx { margin-left:40px;}  

30
.testxxx img{ width:165px; height:100px;} 

31
  
32
</style>