一、需求说明
效果如图：
二、代码实现
项目结构如图：
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="/UploadFiles/2021-04-02/jquery-1.8.3.js">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="/UploadFiles/2021-04-02/' + this.imgInfo.imgPath + '">jQuery实现图片下载代码以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。