jquery图片预览插件实现方法详解

2020-05-23 06:20:25易采站长站整理

});
$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;

// 设置提示框水平垂直居中
var $whiteContent = promptObject.find(".white_content");
var $con = $whiteContent.find(".con"); // 存放图片内容区
var $close = $whiteContent.find(".close"); // 存放“关闭,重置”按钮区

var leftDistance = ($(window).width() - $whiteContent.outerWidth(false)) / 2;
var topDistance = ($(window).height() - $whiteContent.outerHeight(false)) / 2;
$whiteContent.css({"left":leftDistance,"top":topDistance});

// 添加在div范围内的鼠标滚轮事件 窗口滚动

// 鼠标滚动
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);
});

// 设置待显示图片在提示框居中
var data = this.setImgCenterPosition($lightImg, $close, $con);

// 设置图片可以拖拽
$lightImg.draggable({scroll: true});

// 记录图片的初始位置
var returnObj = new Object();
returnObj.imgOriginTop = data.top;
returnObj.imgOriginLeft = data.left;
return returnObj;
},

// 设置图片在父容器中水平垂直居中显示
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();
},

// 将图片恢复至初始大小,和原始位置
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