专注Java教育14年 全国咨询/投诉热线：400-8080-105
动力节点LOGO图
始于2009，口口相传的Java黄埔军校
首页 hot资讯 jQuery图片预览插件实现方法详解

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

更新时间：2021-09-01 11:07:19 来源：动力节点 浏览896次

需求说明

效果如图：

代码实现

项目结构如图：

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

下载图片这个只能在chrome上用，firefox，IE都不行。

以上就是动力节点小编介绍的"jQuery图片预览插件实现方法详解"，希望对大家有帮助，想了解更多可查看 jQuery教程。动力节点在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。

jQuery教程
上一篇jQuery事件详解 下一篇实现jQuery点击颜色切换的方法

相关阅读

最新文章

  • 男 女

提交申请后，顾问老师会电话与您沟通安排学习

课程大纲 学习路线 毕业设计 开发工具
免费课程推荐 >>
技术文档推荐 >>
  • Java培训班
  • 热点话题
  • 城市分站
  • 资源广场
  • 热门专题
Java培训实验班 Java培训就业班 Java培训夜校班 Java培训在职加薪班 Java培训架构师班 Java培训课程
Java培训动态 零基础学Java Java职场就业
北京Java培训 广州Java培训 深圳Java培训 上海Java培训 武汉Java培训 成都Java培训 西安Java培训 郑州Java培训 南京Java培训 长沙Java培训
Java书籍 Java视频教程 Java毕业设计 Java面试题 Java API文档 Java开发工具 Java在线学习
上海java培训 北京java培训 深圳java培训 广州java培训 武汉java培训 成都java培训 西安java培训 郑州java培训 南京java培训 长沙java培训 java线上培训班
更新时间：2024-04-19 07:51:03 免费电话：400-8080-105 备案号：京ICP备09027468号 京公网安备 11030102010736号