<!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>
时间： 2024-08-30 05:45:56