zoukankan      html  css  js  c++  java
  • jquery插件之图片show and hide(一)

    一、效果图:

    picone

    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 { 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; 
        35px; 
    } 
    .li_order_name { 120px;} 
    .li_order_ticket { 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{ 165px; height:100px;}
    
    </style>
  • 相关阅读:
    【2018.05.05 C与C++基础】C++中的自动废料收集:概念与问题引入
    【2018.04.27 C与C++基础】关于switch-case及if-else的效率问题
    【2018.04.19 ROS机器人操作系统】机器人控制:运动规划、路径规划及轨迹规划简介之一
    March 11th, 2018 Week 11th Sunday
    March 10th, 2018 Week 10th Saturday
    March 09th, 2018 Week 10th Friday
    March 08th, 2018 Week 10th Thursday
    March 07th, 2018 Week 10th Wednesday
    ubantu之Git使用
    AMS分析 -- 启动过程
  • 原文地址:https://www.cnblogs.com/waitingbar/p/1956241.html
Copyright © 2011-2022 走看看