jquery圖片預(yù)覽插件實現(xiàn)方法詳解
更新時間：2019年07月18日 10:28:01 作者：羅小樹
這篇文章主要為大家詳細(xì)介紹了jquery圖片預(yù)覽插件的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、需求說明
效果如圖：
二、代碼實現(xiàn)
項目結(jié)構(gòu)如圖：
example.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" />
<title>LIGHTBOX EXAMPLE</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel.js" ></script>
<script type="text/javascript" src="js/mylightbox.js" ></script>
<script type="text/javascript">
$(function(){
// 寫法一：
/*LightBox.init({
imgObj : $(".imgPreview"),
config : {
boxHeight : 300,
boxWidth : 500
}
});*/
// 寫法二：
$(".imgPreview").lightbox({
boxHeight : 300,
boxWidth : 500
});
});
</script>
<link rel="stylesheet" href="css/mylightbox.css" rel="external nofollow" />
<link rel="stylesheet" />
</head>
<body>
<img id="lightImgaa" class="imgPreview" src="images/1.png"/>
<img id="lightImgbb" class="imgPreview" src="images/2.png"/>
</body>
</html>
mylightbox.css
.white_content {
display: none;
position: absolute;
width: 800px;
height: 600px;
/*padding: 6px 16px;*/
padding: 0;
border: 3px solid rgb(252,252,252, 0.2);
background-color: #f5f6f7;
z-index:1002;
overflow: hidden;
}
.white_content .con {
width: 800px;
height: 600px;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#777777;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content .close {
position: relative;
float:right;
clear:both;
width:100%;
text-align:right;
margin:0;
z-index: 10;
height: 20px;
line-height: 20px;
background: white;
}
.white_content .close a {
color:#333;
text-decoration:none;
font-size:14px;
font-weight:700
}
jquery-mousewheel.js（兼容鼠標(biāo)滾輪事件的一個插件）
mylightbox.js
(function($){
var LightBox = function(lightbox) {
var _this_ = this;
// 保存單個lightbox組件
this.lightbox = lightbox;
// 默認(rèn)配置參數(shù)
this.config = {
// 彈框的默認(rèn)高度
"boxHeight" : 600,
// 彈框的默認(rèn)寬度
"boxWidth" : 800,
// 頁面顯示的縮略圖默認(rèn)高度
"thumbnailWidth" : 80,
// 頁面顯示的縮略圖默認(rèn)寬度
"thumbnailHeight" : 80
};
var userConfig = lightbox.config;
if (userConfig) { // 如果傳入了用戶設(shè)置，則使用用戶設(shè)置；否則使用默認(rèn)配置
$.extend(this.config, userConfig);
}
var imgObj = lightbox.imgObj; // 需要有圖片預(yù)覽功能的img對象（jquery對象）
imgObj.width(this.config.thumbnailWidth).height(this.config.thumbnailHeight); // 設(shè)置縮略圖大小
// 設(shè)置圖片點擊后顯示預(yù)覽圖
imgObj.click(function() {
_this_.invoke($(this), _this_.config);
});
};
LightBox.prototype = {
// 事件驅(qū)動方法
invoke : function(imgObj, config) {
var _this_ = this;
// 存放圖片信息的對象
this.imgInfo = this.getImgInfo(imgObj[0].src, config);
var promptHtml = '<div><div id="light" class="white_content">'
+ '<div class="close"><a class="removePrompt" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >關(guān)閉</a> <a class="resetPosition" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >重置</a>'
+ ' <a class="downloadImg" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下載</a></div>'
+ '<div class="con"></div></div>'
+ '<div id="fade" class="black_overlay"></div></div>';
var imgHtml = '<img id="lightImg" class="ui-content" src="' + this.imgInfo.imgPath + '"/>';
var $imgHtml = $(imgHtml).width(this.imgInfo.imgActualWidth).height(this.imgInfo.imgActualHeight);
var $promptHtml = $(promptHtml);
var $whiteContent = $promptHtml.find(".white_content");
var $con = $promptHtml.find(".con");
// 設(shè)置自定義的彈框高寬
$whiteContent.width(config.boxWidth).height(config.boxHeight);
$con.width(config.boxWidth).height(config.boxHeight);
$imgHtml.appendTo($con);
var $body = $("body");
$promptHtml.appendTo($body);
// 設(shè)置提示框的樣式
var returnData = this.promptPosition($promptHtml);
this.imgInfo.imgOriginTop = returnData.imgOriginTop;
this.imgInfo.imgOriginLeft = returnData.imgOriginLeft;
// 綁定事件
$promptHtml.find(".resetPosition").off("click").on("click", function() { // 重置按鈕
_this_.revertImg($promptHtml, _this_.imgInfo);
});
$promptHtml.find(".removePrompt").off("click").on("click", function() { // 關(guān)閉按鈕
$promptHtml.remove();
});
$promptHtml.find(".downloadImg").off("click").on("click", function() { // 下載按鈕
_this_.downloadImg(_this_.imgInfo.imgPath);
});
this.showPrompt($promptHtml);
},
// 顯示提示框
showPrompt : function(promptObject) {
var $whiteContent = promptObject.find(".white_content");
var $blackOverlay = promptObject.find(".black_overlay");
$whiteContent.show();
$blackOverlay.show();
},
// 對需要顯示的提示框的樣式進行初始化操作
promptPosition : function(promptObject, imgActualHeight, imgActualWidth) {
var _this_ = this;
// 設(shè)置提示框水平垂直居中
var $whiteContent = promptObject.find(".white_content");
var $con = $whiteContent.find(".con"); // 存放圖片內(nèi)容區(qū)
var $close = $whiteContent.find(".close"); // 存放“關(guān)閉，重置”按鈕區(qū)
var leftDistance = ($(window).width() - $whiteContent.outerWidth(false)) / 2;
var topDistance = ($(window).height() - $whiteContent.outerHeight(false)) / 2;
$whiteContent.css({"left":leftDistance,"top":topDistance});
// 添加在div范圍內(nèi)的鼠標(biāo)滾輪事件 窗口滾動
// 鼠標(biāo)滾動
var $lightImg = $whiteContent.find(".ui-content");
$whiteContent.on("mousewheel", function(event, delta){
var imgWidth = $lightImg.width() * (1 + 0.1 * delta);
var imgHeight = $lightImg.height() * (1 + 0.1 * delta);
$lightImg.width(imgWidth).height(imgHeight);
_this_.setImgCenterPosition($lightImg, $close, $con);
});
// 設(shè)置待顯示圖片在提示框居中
var data = this.setImgCenterPosition($lightImg, $close, $con);
// 設(shè)置圖片可以拖拽
$lightImg.draggable({scroll: true});
// 記錄圖片的初始位置
var returnObj = new Object();
returnObj.imgOriginTop = data.top;
returnObj.imgOriginLeft = data.left;
return returnObj;
},
// 設(shè)置圖片在父容器中水平垂直居中顯示
setImgCenterPosition : function(imgObj, closeObj, parentObj) {
var imgOriginTop = (parentObj.outerHeight() - closeObj.outerHeight() - imgObj.outerHeight())/2;
var imgOriginLeft = (parentObj.outerWidth() - imgObj.outerWidth())/2;
var data = {"top" : imgOriginTop, "left" : imgOriginLeft};
imgObj.css(data);
return data;
},
// 下載圖片 這個只能在chrome上用，firefox，IE都不行①
downloadImg : function(imgPath) {
var imgFileName = imgPath.substring(imgPath.lastIndexOf("/")+1); // 獲取圖片文件名
var $a = $("<a></a>").attr("href", imgPath).attr("download", imgFileName);
$a[0].click();
},
// 將圖片恢復(fù)至初始大小，和原始位置
revertImg : function(promptObject, imgInfo) {
var $lightImg = promptObject.find(".ui-content");
if ($lightImg.height() != imgInfo.imgActualHeight
|| $lightImg.width() != imgInfo.imgActualWidth
|| parseInt($lightImg.css("top")) != imgInfo.imgOriginTop
|| parseInt($lightImg.css("left")) != imgInfo.imgOriginLeft) {
$lightImg.animate({
"height" : imgInfo.imgActualHeight,
"width" : imgInfo.imgActualWidth,
"top": imgInfo.imgOriginTop,
"left": imgInfo.imgOriginLeft
});
}
},
// 獲取圖片信息
getImgInfo : function(imgPath, config) {
// 獲取顯示彈框的寬高
var boxHeight = config.boxHeight;
var boxWidth = config.boxWidth;
var imgObj = $("<img/>", {"src" : imgPath})[0];
// 獲取圖片的真實寬高
var imgRealHeight = imgObj.height;
var imgRealWidth = imgObj.width;
// 計算圖片適應(yīng)提示框大小后呈現(xiàn)的寬高
var imgActualHeight;
var imgActualWidth;
if (imgRealHeight / imgRealWidth >= boxHeight / boxWidth) {
imgActualHeight = imgRealHeight > boxHeight ? boxHeight : imgRealHeight;
imgActualWidth = imgActualHeight / imgRealHeight * imgRealWidth;
} else {
imgActualWidth = imgRealWidth > boxWidth ? boxWidth : imgRealWidth;
imgActualHeight = imgActualWidth / imgRealWidth * imgRealHeight;
}
var returnObj = new Object();
returnObj.imgPath = imgPath;
returnObj.imgRealHeight = imgRealHeight;
returnObj.imgRealWidth = imgRealWidth;
returnObj.imgActualHeight = imgActualHeight;
returnObj.imgActualWidth = imgActualWidth;
return returnObj;
},
};
// 插件供外部調(diào)用的兩種寫法
// 方法一：
LightBox.init = function(lightboxes) {
var _this_ = this;
var imgObjs = lightboxes.imgObj;
var config = lightboxes.config;
imgObjs.each(function() {
new _this_({
imgObj : $(this),
config : config
});
});
};
window.LightBox = LightBox;
// 方法二：注冊成jq方法
$.fn.extend({
lightbox : function(config){
this.each(function(){
new LightBox({
imgObj : $(this),
config : config
});
});
return this;
}
});
}(jQuery));
// 下載圖片 這個只能在chrome上用，firefox，IE都不行①jQuery實現(xiàn)圖片下載代碼
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效
今天小編就為大家分享一篇關(guān)于Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
最近在做手機上的web app，很多場景需要使用到類似tab切換和圖片輪播的東西，需要支持手勢和鼠標(biāo)點擊的，于是就基于jquery弄了一個，每一個參數(shù)有詳細(xì)的說明2012-07-07
jQuery+formdata實現(xiàn)上傳進度特效遇到的問題
這篇文章主要介紹了jQuery+formdata實現(xiàn)上傳進度特效遇到的問題的相關(guān)資料,需要的朋友可以參考下2016-02-02
JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件等，下面有個示例，感興趣的朋友可以參考下2014-01-01
jQuery+正則+文本框只能輸入數(shù)字的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了jQuery時間日期三級聯(lián)動的實現(xiàn)代碼，代碼簡答易懂，非常實用，需要的朋友參考下吧2016-11-11
利用Jquery實現(xiàn)幾款漂亮實用的時間軸(附示例代碼)
這篇文章主要介紹了利用Jquery實現(xiàn)幾款漂亮的時間軸示例代碼，文中利用Jquery實現(xiàn)了縱向折疊時間軸、縱向鼠標(biāo)滑動時間軸、縱向可折疊時間軸以及橫向時間軸，每種時間軸都給出了完整的示例代碼，需要的朋友可以參考學(xué)習(xí)。2017-02-02
這篇文章主要介紹了一個簡單的Tab切換組件實例，大家可以參考使用2013-11-11
jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
用上述方式動態(tài)加載datagrid的數(shù)據(jù)時，通過net監(jiān)聽，發(fā)現(xiàn)調(diào)用了兩遍XX方法，目前的解決方案是，將url放到datagrid初始化的時候執(zhí)行2016-12-12
jQuery向后臺傳入json格式數(shù)據(jù)的方法
這篇文章主要介紹了jQuery向后臺傳入json格式數(shù)據(jù)的方法,實例分析了傳遞json格式數(shù)據(jù)的原理與具體實現(xiàn)技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2015-02-02