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

2024-12-15 21:21:16

一、需求说明

效果如图：

二、代码实现

项目结构如图：

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实现鼠标经过图片预览大图效果

jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码.jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery. 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图.接下来我就粘
jquery.uploadView 实现图片预览上传功能

图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改来看代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src=&quo
jquery入门—数据删除与隔行变色以及图片预览

1.功能需求:表格中数据隔行变色.删除数据.全选删除.鼠标移动到图片时显示图片预览 2.示例代码如下: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 数据管理 </TITLE> <META NAME="Generator" CONTENT="Edi
基于jquery实现的上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证复制代码代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u
jQuery插件imgPreviewQs实现上传图片预览

上传图片预览,支持IE6.IE7.IE8.IE9.IE10.IE11. 火狐.Chrome 具体没有测试,但是高版本都支持. imgPreviewQs.js /*! 依赖 jQuery 1.5.2 (c) 2016 license: http://www.opensource.org/licenses/mit-license.php */ (function($){ $.fn.imgPreviewQs = function(options){ function isIE(ver){ var b
jquery图片预览插件实现方法详解

一.需求说明效果如图: 二.代码实现项目结构如图: 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"> <he
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat
jquery图片播放浏览插件prettyPhoto使用详解

一.prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频.flash.YouTube.iframe和ajax.而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义prettyPhoto.目前,prettyPhoto兼容大部分主流的浏览器,包括令人纠结的IE6. prettyPhoto插件的项目地址:http://www.no-margin-for-errors.com/p
Android仿头条、微信大图预览视图的方法详解

图片大图预览在我现在的项目当中,也存在大图预览的功能,但其实现过于繁重,采用一个Activity实现,并且在图片展示的过程中会产生卡顿感,整体感觉很是不好,正巧项目也在重构过程中,所以决定将这一功能写成一个成型的控件. 话不多说,先上图看下效果. 整体实现思路图片展示:PhotoView(大图支持双击放大) 图片加载:Glide(加载网络图片.本地图片.资源文件) 小图变大图时的实现:动画图片的下载:插入系统相册该控件采用自定义View的方式,通过一些基本的控件的组合,来形成一个具有大图
jquery轮播图插件使用方法详解

本文实例为大家分享了jquery轮播图插件使用案例,供大家参考,具体内容如下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> <
jQuery Masonry瀑布流插件使用方法详解

用jQuery Masonry 插件创建瀑布流式的页面我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法. 1.分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="http://jq22.qiniud
Vue.js图片预览插件使用详解

Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程. 如果你已经是有经验的前端开发者,想知道 Vue
JS实现的图片预览插件与用法示例【不上传图片】

本文实例讲述了JS实现不需要上传的图片预览插件与用法.分享给大家供大家参考,具体如下: 小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
jQuery的图片轮播插件PgwSlideshow使用详解

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides
基于Vue2x的图片预览插件的示例代码

本文介绍了基于Vue2x的图片预览插件的示例代码,分享给大家,具体如下: 先来看下Demo LiveDemo 关于开发Vue插件的几种方式 (具体请移步官网)Vue官网 MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, bin

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

相关推荐

随机推荐