使用jquery怎么实现一个图片预览插件

今天就跟大家聊聊有关使用jquery怎么实现一个图片预览插件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

我们提供的服务有:成都做网站、成都网站建设、微信公众号开发、网站优化、网站认证、宁津ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的宁津网站制作公司

项目结构如图:

使用jquery怎么实现一个图片预览插件

example.html

 
 
 
 
LIGHTBOX EXAMPLE





 $(function(){
 // 写法一:
 /*LightBox.init({
 imgObj : $(".imgPreview"),
 config : {
 boxHeight : 300,
 boxWidth : 500
 }
 });*/
 // 写法二:
 $(".imgPreview").lightbox({
 boxHeight : 300,
 boxWidth : 500
 });
 });

 


 

 
 
 

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

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

看完上述内容,你们对使用jquery怎么实现一个图片预览插件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网站栏目:使用jquery怎么实现一个图片预览插件
本文网址:http://pwwzsj.com/article/pieodd.html

其他资讯