需要的資源：

需要對應(yīng)的js代碼和css樣式，大家可以通過www.htmldrive.net平臺下載，也可以在我文章的底部下載。對應(yīng)的資源如下，將資源引入頁面（別忘了JQuery）：

注意：jQuery最好使用1.3版本的，有些版本行不通，親測1.8版本不行

HTML代碼：

js代碼：

$(".test").imgbox({
                'speedIn': 500,
                'speedOut': 500,
                'alignment': 'center',
                'overlayShow': true,
                'allowMultiple': false,
                'autoScale': true
            });

　　

效果：

講解：

以上例子中，我們只用了一行js代碼“$(".test").imgbox();”，就實現(xiàn)了圖片彈出放大效果。這是因為在jquery.imgbox.js中imgbox()函數(shù)有默認的參數(shù)。當(dāng)我們調(diào)用函數(shù)但沒有傳遞參數(shù)時，會加載默認的參數(shù)，顯示默認效果和樣式。

如果覺得默認樣式不合適，有兩種方式進行修改：1、修改jquery.imgbox.js中imgbox()函數(shù)的默認參數(shù)；2、調(diào)用imgbox()函數(shù)時，給參數(shù)賦值。

//在jquery.imgbox.js中，默認參數(shù)如下，可以修改：
$.fn.imgbox.defaults = {
    padding				:	10,
	alignment			:	'auto', // auto OR center
	allowMultiple		:	true,
	autoScale			:	true,
	speedIn				:	500,
	speedOut			:	500,
	easingIn			:	'swing',
	easingOut			:	'swing',
	zoomOpacity			:	false,
	overlayShow			:	false,
	overlayOpacity		:	0.5,
	hideOnOverlayClick	:	true,
	hideOnContentClick	:	true
};　

參數(shù)的含義：

padding：彈窗中圖片的邊框，0為沒有邊框。
alignment：彈窗的位置，“auto”或“center”，默認情況下，它從縮略圖所在方向擴展彈窗
allowMultiple：如果選true，允許多個彈出窗口同時打開
autoScale：如果為true，彈窗會自適應(yīng)窗口的大小
speedIn、speedOut:打開彈窗和關(guān)閉彈窗的速度，單位：毫秒
zoomOpacity：如果為true，會在彈窗縮放時改變透明度
overlayShow：如果為true，會有遮罩層（默認為false；遮罩層的顏色在css中設(shè)置）
overlayOpacity:遮罩層的透明度（取值范圍0~1）
hideOnOverlayClick：當(dāng)點擊遮罩層時，關(guān)閉彈窗
hideOnContentClick：當(dāng)點擊圖片時，關(guān)閉彈窗

轉(zhuǎn)載自：https://blog.csdn.net/kangnan00/article/details/72518352

資源下載（里面附帶例子）：http://download.csdn.net/detail/kangnan00/9846375

總結(jié)

以上是生活随笔為你收集整理的jQuery插件——imgbox（点击图片查看大图）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。