jquery圖片預(yù)覽插件實(shí)現(xiàn)方法詳解
更新時(shí)間：2019年07月18日 10:28:01 作者：羅小樹
這篇文章主要為大家詳細(xì)介紹了jquery圖片預(yù)覽插件的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一、需求說明
效果如圖：
二、代碼實(shí)現(xiàn)
項(xiàng)目結(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)滾輪事件的一個(gè)插件）
mylightbox.js
(function($){
var LightBox = function(lightbox) {
var _this_ = this;
// 保存單個(gè)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è)置圖片點(diǎn)擊后顯示預(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();
},
// 對需要顯示的提示框的樣式進(jìn)行初始化操作
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;
},
// 下載圖片 這個(gè)只能在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];
// 獲取圖片的真實(shí)寬高
var imgRealHeight = imgObj.height;
var imgRealWidth = imgObj.width;
// 計(jì)算圖片適應(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));
// 下載圖片 這個(gè)只能在chrome上用，firefox，IE都不行①jQuery實(shí)現(xiàn)圖片下載代碼
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于jquery插件實(shí)現(xiàn)拖拽刪除圖片功能
這篇文章主要介紹了基于jquery插件實(shí)現(xiàn)拖拽刪除圖片功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
jQuery實(shí)現(xiàn)form表單reset按鈕重置清空表單功能
有時(shí)候可能需要實(shí)現(xiàn)這樣的效果：使用ajax提交表單，成功提交表單之后清空表單,這種功能大家可能都希望實(shí)現(xiàn)吧，接下來為您詳細(xì)介紹，需要了解的朋友參考下2012-12-12
ASP.NET jQuery 實(shí)例13 原創(chuàng)jQuery文本框字符限制插件-TextArea Counter
這節(jié)介紹一個(gè)自己寫的jQuery文本框字符限制插件，至于如何寫插件，我這里就不多講了，可以查看相關(guān)介紹，這里主要介紹下該插件的功能2012-02-02
jquery uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要總結(jié)了jQuery 常用操作方法及常用函數(shù),需要的朋友可以參考下2014-06-06
jQuery解析json格式數(shù)據(jù)簡單實(shí)例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01
jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器(商城可用)
這篇文章主要介紹了jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器，商城一類都可以使用2017-06-06
基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動態(tài)列表效果
最近基于jQuery和Bootstrap框架實(shí)現(xiàn)了一個(gè)仿知乎動態(tài)列表的前端效果，基本實(shí)現(xiàn)了和知乎動態(tài)列表相同的效果，下面小編通過本文給大家分享實(shí)現(xiàn)思路及代碼，對bootstrap 實(shí)現(xiàn)仿知乎前端動態(tài)列表效果感興趣的朋友一起看看吧2016-11-11
jQuery實(shí)現(xiàn)hover合成事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)hover合成事件的方法,涉及jquery中hover事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JQuery的attr 與 val區(qū)別的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06