编写JQuery插件示例
javascript:
$.fn.extend({
PhotoShowSilder:function(_box){
_box = _box || document;
var $ul = $("ul",_box);
var $li = $("li",$ul);
var img = $("#PhotoShow",_box);
var pic = $("#pic",_box);
var minheight = "60px";
var maxheight = (Math.ceil($li.length/3) * 60) + "px";
var isExp = false;
return this.each(function(){
var $this = $(this);
$this.click(function(event){
if(isExp){
pic.animate({
height: minheight
}, 600 );
//alert($this.attr("src"));
//alert(event.target.src);
$this.attr("src","resource/btn.gif");
isExp = false;
}
else{
pic.animate({
height: maxheight
}, 600 );
$this.attr("src","resource/btn-1.gif");
isExp = true;
}
});
});
}
});
(function($){
$(".PhotoShowSilder").PhotoShowSilder($(".productArea"));
})(jQuery);
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>我的订单</title>
<link href="resource/css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="resource/jquery-1.6.min.js"></script>
<script type="text/javascript" src="resource/order.js" defer></script>
</head>
<body class="cols_manage">
<div class="wrapper">
<div class="productArea">
<ul class="product-ul" id="pic">
<li>
<a href="http://item.vancl.com/0107419.html" target="_blank"><img src="resource/0107419-0201203231051004260.jpg" alt="七分袖V领针织开衫 米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167048.html" target="_blank"><img src="resource/0167048-0201203131445461860.jpg" alt="[VT]短袖印花T恤 太阳眼镜(女款) 玉米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167871.html" target="_blank"><img src="resource/0167871-0201202061412543180.jpg" alt="[VT]短袖印花T恤 Yes,I do 皇后(女款) 鲜黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0168121.html" target="_blank"><img src="resource/0168121-1j201203071745163650.jpg" alt="糖果蝴蝶结平底女鞋 黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0169832.html" target="_blank"><img src="resource/0169832-1j201202021047577310.jpg" alt="潮流风情真皮高跟女鞋 红色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0107419.html" target="_blank"><img src="resource/0107419-0201203231051004260.jpg" alt="七分袖V领针织开衫 米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167048.html" target="_blank"><img src="resource/0167048-0201203131445461860.jpg" alt="[VT]短袖印花T恤 太阳眼镜(女款) 玉米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167871.html" target="_blank"><img src="resource/0167871-0201202061412543180.jpg" alt="[VT]短袖印花T恤 Yes,I do 皇后(女款) 鲜黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0168121.html" target="_blank"><img src="resource/0168121-1j201203071745163650.jpg" alt="糖果蝴蝶结平底女鞋 黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0169832.html" target="_blank"><img src="resource/0169832-1j201202021047577310.jpg" alt="潮流风情真皮高跟女鞋 红色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0107419.html" target="_blank"><img src="resource/0107419-0201203231051004260.jpg" alt="七分袖V领针织开衫 米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167048.html" target="_blank"><img src="resource/0167048-0201203131445461860.jpg" alt="[VT]短袖印花T恤 太阳眼镜(女款) 玉米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167871.html" target="_blank"><img src="resource/0167871-0201202061412543180.jpg" alt="[VT]短袖印花T恤 Yes,I do 皇后(女款) 鲜黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0168121.html" target="_blank"><img src="resource/0168121-1j201203071745163650.jpg" alt="糖果蝴蝶结平底女鞋 黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0169832.html" target="_blank"><img src="resource/0169832-1j201202021047577310.jpg" alt="潮流风情真皮高跟女鞋 红色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0107419.html" target="_blank"><img src="resource/0107419-0201203231051004260.jpg" alt="七分袖V领针织开衫 米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167048.html" target="_blank"><img src="resource/0167048-0201203131445461860.jpg" alt="[VT]短袖印花T恤 太阳眼镜(女款) 玉米色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0167871.html" target="_blank"><img src="resource/0167871-0201202061412543180.jpg" alt="[VT]短袖印花T恤 Yes,I do 皇后(女款) 鲜黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0168121.html" target="_blank"><img src="resource/0168121-1j201203071745163650.jpg" alt="糖果蝴蝶结平底女鞋 黄色" height="50px" width="50px"></a>
</li>
<li>
<a href="http://item.vancl.com/0169832.html" target="_blank"><img src="resource/0169832-1j201202021047577310.jpg" alt="潮流风情真皮高跟女鞋 红色" height="50px" width="50px"></a>
</li>
</ul>
<a class="track product-btn" id="PhotoShow" style="cursor: pointer;">
<img src="resource/btn.gif" class="PhotoShowSilder" alt="">
</a>
</div>
<br>
</div>
</body>
</html>
注意：引入的自定义插件js，要加上defer关键字
