一、需求说明
效果如图：
二、代码实现
项目结构如图：
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" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" /></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（兼容鼠标滚轮事件的一个插件）
mylightbox.js
(function($){ var LightBox = function(lightbox) { var _this_ = this; // 保存单个lightbox组件 this.lightbox = lightbox; // 默认配置参数 this.config = { // 弹框的默认高度 "boxHeight" : 600, // 弹框的默认宽度 "boxWidth" : 800, // 页面显示的缩略图默认高度 "thumbnailWidth" : 80, // 页面显示的缩略图默认宽度 "thumbnailHeight" : 80 }; var userConfig = lightbox.config; if (userConfig) { // 如果传入了用户设置，则使用用户设置；否则使用默认配置 $.extend(this.config, userConfig); } var imgObj = lightbox.imgObj; // 需要有图片预览功能的img对象（jquery对象） imgObj.width(this.config.thumbnailWidth).height(this.config.thumbnailHeight); // 设置缩略图大小 // 设置图片点击后显示预览图 imgObj.click(function() { _this_.invoke($(this), _this_.config); }); }; LightBox.prototype = { // 事件驱动方法 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" >关闭</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"); // 设置自定义的弹框高宽 $whiteContent.width(config.boxWidth).height(config.boxHeight); $con.width(config.boxWidth).height(config.boxHeight); $imgHtml.appendTo($con); var $body = $("body"); $promptHtml.appendTo($body); // 设置提示框的样式 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() { // 关闭按钮 $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; // 设置提示框水平垂直居中 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 || 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; // 计算图片适应提示框大小后呈现的宽高 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; }, }; // 插件供外部调用的两种写法 // 方法一： 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));
新闻热点
疑难解答
