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

一、效果图：

tips:源码下载：https://files.cnblogs.com/waitingbar/orderlist.rar

二、jquery源码：

view sourceprint?

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>

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

view sourceprint?

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>

分类: jquery