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

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

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

项目结构如图：

example.html

 
 
 
 






 $(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 = '
'
 + '关闭 重置'
 + ' 下载
'
 + '