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


Posted in jQuery onJuly 18, 2019

一、需求说明

效果如图:

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

二、代码实现

项目结构如图:

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"> 
<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 相关文章推荐
jquery图片放大镜效果
Jun 23 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
You might like
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php基础教程
2015/08/26 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python常见异常分类与处理方法
2017/06/04 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Python中相见恨晚的技巧
2021/04/13 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
浅谈MySQL中的六种日志
2022/03/23 MySQL