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

一、效果图：

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>