jQuery關於圖片處理的插件比較多，關於圖片放大的也不在少數。實現類似於淘寶上圖片局部放大的功能還是比較簡單的。
jQuery這方面開源插件的查找可以去開源社區：http://www.oschina.net/search?scope=project&q=%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7
也可以去jQuery插件庫去查找：http://www.jq22.com/
當然，我們這裏講的圖片放大，並不是簡單的使用通用插件就可以實現的。我們要求鼠標懸停到圖片上時，圖片放大，但圖片的顯示框大小不變，而且要有動畫效果。這就意味着圖片的一部分是會被覆蓋掉不顯示的。
類似的效果如：http://www.brides.com/
所以，我們要私人訂製一個簡單的小插件，來實現類似的動畫效果。
下面是jquery.zoomImgRollover.js部分的代碼：
(function(jQuery){
jQuery.fn.zoomImgRollover = function(options) {
var defaults = {
percent:30,//放大百分比
duration:600//延遲時間
};
var opts = jQuery.extend(defaults, options);//擴展一個對象
// static zoom function
function imageZoomStep(jZoomImage, x, origWidth, origHeight)
{
var width = Math.round(origWidth * (.5 + ((x * opts.percent) / 200))) * 2;
var height = Math.round(origHeight * (.5 + ((x * opts.percent) / 200))) * 2;
var left = (width - origWidth) / 2;
var top = (height - origHeight) / 2;
jZoomImage.css({width:width, height:height, top:-top, left:-left});
}
return this.each(function()
{
var jZoomImage = jQuery(this);
var origWidth = jZoomImage.width();
var origHeight = jZoomImage.height();
// add css ness. to allow zoom
jZoomImage.css({position: "relative"});
jZoomImage.parent().css({overflow: "hidden", display:"block", position: "relative", width: origWidth, height: origHeight});
jZoomImage.mouseover(function()
{
jZoomImage.stop().animate({dummy:1},{duration:opts.duration, step:function(x)
{
imageZoomStep(jZoomImage, x, origWidth, origHeight)
}});
});
jZoomImage.mouseout(function()
{
jZoomImage.stop().animate({dummy:0},{duration:opts.duration, step:function(x)
{
imageZoomStep(jZoomImage, x, origWidth, origHeight)
}});
});
});
};
})(jQuery);程序設計思路及解釋如下：
jQuery中添加自定義或函數方法有三種：
方法一：
jQuery.fn.setApDiv=function () {
//apDiv浮動層顯示位置居中控制
var wheight=$(window).height();
var wwidth=$(window).width();
var apHeight=wheight-$("#apDiv").height();
var apWidth=wwidth-$("#apDiv").width();
$("#apDiv").css("top",apHeight/2);
$("#apDiv").css("left",apWidth/2);
}
調用方法：$("#apDiv").setApDiv();
--------------------------------------------------------------------------------
方法二：
//jQuery 應用擴展
jQuery.extend({
// 設置 apDiv
setApDiv:function () {
//apDiv浮動層顯示位置居中控制
var wheight=$(window).height();
var wwidth=$(window).width();
var apHeight=wheight-$("#apDiv").height();
var apWidth=wwidth-$("#apDiv").width();
$("#apDiv").css("top",apHeight/2);
$("#apDiv").css("left",apWidth/2);
}
});
調用方法：$.setApDiv();
總結 一種如$.extend({'aa':function(){}}),這種調用時就是這樣$.aa(),另一種如$.fn.extend({'aa':function(){}}),這種調用時就得這樣,$(this).aa()
--------------------------------------------------------------------------------
方法三：
$.postJSON = function(url, data, callback) {
$.post(url, data, callback, "json");
};
調用方法：$.postJSON('/post/getsecurejsonpost',{}, function(data) {});
我們用的是第一種。
jquery的$.extend用法及說明參見：http://blog.sina.com.cn/s/blog_7c5d61f30101da1k.html
另外：jZoomImage.stop().animate({dummy:1},{duration:opts.duration, step:function(x)中的{dummy:1}沒有實際意義；
函數重點x，個人理解animate會自動使得它從0變到1，持續時間是600毫秒。
頁面代碼比較簡單，就是在頁面的中間顯示一張自定義大小的圖片：
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery圖片放大插件鼠標滑過圖片放大效果</title>
<meta name="description" content="jquery圖片放大插件製作一個當鼠標滑過圖片，圖片按等比例縮放放大效果。動畫圖片放大展示特效。jQuery插件。">
</head>
<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.zoomImgRollover.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".testimg").zoomImgRollover();//這裏是調用函數
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
img{border:0;}
.demo{width:544px;margin:20px auto;}jquery.zoomImgRollover.js
</style>
<div class="demo">
<img class="testimg" width="400" height="564" src="test.jpg" alt="" border="0" style="position: relative; width: 400px; height: 564px; top: 0px; left: 0px;">
</div>
</body></html>