首页 > 代码库 > Jquery 学习插件第一天
Jquery 学习插件第一天
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>学习插件</title> <script src=http://www.mamicode.com/"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=http://www.mamicode.com/"1.jpg"/></li> <li><img src=http://www.mamicode.com/"2.jpg"/></li> <li><img src=http://www.mamicode.com/"3.jpg"/></li> <li><img src=http://www.mamicode.com/"4.jpg"/></li> <li><img src=http://www.mamicode.com/"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>
Jquery 学习插件第一天
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。