Jquery 学习插件第一天
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>学习插件</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style> body{ margin:0; padding:0; } li { list-style:none;width:300px;height:300px; float:left;} img{width:100%;height:100%;} #show ul{ margin:0; padding:0; overflow:hidden; } img , div{transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;} .scale{ transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); } </style> </head> <body> <ul id="show"> <li><img src="1.jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="3.jpg"/></li> <li><img src="4.jpg"/></li> <li><img src="5.jpg"/></li> </ul> <p style="clear:both;"></p> <div style="width:100px;height:100px;background:#ccc;"> </div> <script type="text/javascript"> (function($) { $.fn.extend({ "ShowImg": function(options) { options = $.extend({},{ border: "3px solid red", height: "100px" },options); //这里用了$.extend方法，扩展一个对象 /*** return this.hover(function() { //return为了保持jQuery的链式操作 $(this).css({ "width": options.width, "height": options.height }); }, function() { $(this).css({ "width": "100px", "height": "100px" }); });*/// var op = options.border; return this.click(function(){ var had = $(this).hasClass('scale'); if(!had){ $('#show').find('img').removeClass('scale'); $('#show').find('img').css({ "border": "", }); $(this).addClass('scale'); $(this).css({ "border": "3px solid red", }) }else{ $(this).removeClass('scale'); } }) } }); })(jQuery); $(function() { $("img").ShowImg({ }); $("div").ShowImg({ }); // alert($.urlParam()); }); </script> </body> </html>
人如代码，规矩灵活；代码如诗，字句精伦。
