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实现提示语淡入效果
May 05 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
Node 代理访问的实现
2019/09/19 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
会计专业自荐信
2013/12/02 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
网络妈妈观后感
2015/06/08 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js