1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8" />
  5.   <title>学习插件</title>
  6.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  7.   <style>
  8.     body{
  9.         margin:;
  10.         padding:;
  11.     }
  12.     li { list-style:none;width:300px;height:300px;
  13.     float:left;}
  14.     img{width:%;height:%;}
  15.     #show ul{
  16.         margin:;
  17.         padding:;
  18.         overflow:hidden;
  19.     }
  20.  
  21.     img , div{transition:All .4s ease-in-out;    -webkit-transition:All .4s ease-in-out;    -moz-transition:All .4s ease-in-out;    -o-transition:All .4s ease-in-out;}
  22.  
  23.     .scale{
  24.         transform:scale(1.2);
  25.         -webkit-transform:scale(1.2);
  26.         -moz-transform:scale(1.2);
  27.         -o-transform:scale(1.2);
  28.         -ms-transform:scale(1.2);
  29.     }
  30. </style>
  31.  </head>
  32.  <body>
  33. <ul id="show">
  34.     <li><img src="1.jpg"/></li>
  35.     <li><img src="2.jpg"/></li>
  36.     <li><img src="3.jpg"/></li>
  37.     <li><img src="4.jpg"/></li>
  38.     <li><img src="5.jpg"/></li>
  39. </ul>
  40. <p style="clear:both;"></p>
  41. <div style="width:100px;height:100px;background:#ccc;">
  42.  
  43. </div>
  44.  
  45.   <script type="text/javascript">
  46.  
  47. (function($) {
  48. 　　$.fn.extend({
  49. 　　"ShowImg": function(options) {
  50. 　　    options = $.extend({},{
  51.                 border: "3px solid red",
  52.                 height: "100px"
  53.             },options); 
  54.  
  55.             //这里用了$.extend方法，扩展一个对象
  56.         /*** return this.hover(function() { //return为了保持jQuery的链式操作
  57.                 　　$(this).css({
  58.                     "width": options.width,
  59.                     "height": options.height
  60.                 });　　
  61.             },
  62.             function() {
  63.             　　$(this).css({
  64.                     "width": "100px",
  65.                     "height": "100px"
  66.                 });　　
  67.             });*///
  68.             var op = options.border;
  69.             return this.click(function(){
  70.                 var had = $(this).hasClass('scale');
  71.                 if(!had){
  72.                     $('#show').find('img').removeClass('scale');
  73.                     $('#show').find('img').css({
  74.                         "border": "",
  75.                     });
  76.                     $(this).addClass('scale');
  77.                     $(this).css({
  78.                         "border": "3px solid red",
  79.                     })
  80.                 }else{
  81.                     $(this).removeClass('scale');
  82.  
  83.                 }
  84.             })
  85.         }
  86.     });
  87.  
  88. })(jQuery);
  89.  
  90. $(function() {
  91. 　　$("img").ShowImg({    });
  92. 　　$("div").ShowImg({    });
  93.     　 // alert($.urlParam());
  94. });
  95. </script>
  96.  </body>
  97. </html>

Jquery 学习插件第一天的更多相关文章

  1. Jquery学习插件之手风琴

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  3. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  4. 第一百七十六节，jQuery，插件

    jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 ...

  5. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  6. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  7. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  8. JQuery zoom插件学习

    jquery zoom是一款图片放大插件,经常用在商城商品页面里. 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 ...

  9. jQuery学习笔记（jquery.form插件）

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

随机推荐

  1. 使用Java Applet在客户端解压缩，以及使用证书的意义

    以前解压缩是用Java Applet在客户端解压缩,而且用户不知道这回事.但是现在Chrome不支持NP API了,所以不得不把Java去掉,然后在服务器里解压缩.风险在于,解压缩以后,传输到客户端的 ...

  2. Xamarin.Forms本地化多语言

    Forms 右键新建文件夹 Localization 新建文件TranslateExtension.cs namespace Localization { /// <summary> // ...

  3. Delphi TdxBarManager通过代码生成菜单

    procedure TForm6.btn1Click(Sender: TObject);var  ABar:TdxBar;  ABarItem:TdxBarItem;  ABarSubItem:Tdx ...

  4. 转自http://blog.sina.com.cn/daylive——C++ STL map

    Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可以起到事半功倍的效果,总结了一些map基本简单实用的操作! 1.map最基本的构造函数: map<string ...

  5. G - Balanced Lineup - poj3264（区间查询）

    题意:给你一组值,然后询问某个区间的最大值和最小值得差 分析:因为没有更新,所以只需要查找即可,节点保存一个最大值最小值就行了 ************************************ ...

  6. java中集合杂记

    HashSet类按照哈希算法来存取集合中的对象,具有很有的性能.当HashSet向集合中加入一个对象时,会调用对象的hashCode()方法获得哈希码,然后根据这个哈希码进一步计算出对象在集合中的存放 ...

  7. Linux2.6内核--VFS层中和进程相关的数据结构

          系统中的每一个进程都有自己的一组打开的文件,像根文件系统,当前工作目录,安装点等.有三个数据结构将 VFS 层和系统的进程紧密的联系在一起,它们分别是: file_struct,fs_st ...

  8. thead、tbody、tfoot与顺序无关

    今天发现一个问题,thead.tbody.tfoot等标签的内容排版与顺序无关,做了一个小的实验:

  9. Guava Collect

    Guava是什么 进入新公司就会接触一些新的东东,Guava就是一个,Guava是Google的一个开源类库,丰富了JDK的API,并且使用起来非常方便,本文介绍的是Guava collect包下的一 ...

  10. 对openflow 1.0协议的扩展

    通过这几天对openvswitch代码的分析,以及项目的须要,须要对openflow 1.0进行一定的扩展,发现网上没有这方面的教程,尽管在搞懂ovs代码架构,floodlight controlle ...