侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   553

一、需求说明

效果如图:

二、代码实现

项目结构如图:

example.html

    LIGHTBOX EXAMPLE     

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 = '
' + '
关闭 重置' + ' 下载' + '
' + '
'; var imgHtml = ''; 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 = $("").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 = $("", {"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));

// 下载图片 这个只能在chrome上用,firefox,IE都不行①jQuery实现图片下载代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • jquery.uploadView 实现图片预览上传功能
  • jQuery插件imgPreviewQs实现上传图片预览
  • jQuery实现鼠标经过图片预览大图效果
  • jquery入门―数据删除与隔行变色以及图片预览
  • 基于jquery实现的上传图片及图片大小验证、图片预览效果代码


  • 上一条:
    vue使用自定义指令实现拖拽
    下一条:
    使用react context 实现vue插槽slot功能
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客