JS实现点击图片在当前页面放大并可关闭的漂亮效果


Posted in Javascript onOctober 18, 2013

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.

点击这里查看实例演示

如何使用:

步骤 1 - 安装
1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

步骤 2 - 激活
1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
可选择项: 使用 title 属性加上说明.
2、如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
3、没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了!

下载: Lightbox JS v2.02

Javascript 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
js Dialog 实践分享
Oct 22 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
jquery 循环显示div的示例代码
Oct 18 #Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 #Javascript
简单实用的全选反选按钮例子
Oct 18 #Javascript
关于jquery的多个选择器的使用示例
Oct 18 #Javascript
js页面跳转的常用方法整理
Oct 18 #Javascript
js判断上传文件的类型和大小示例代码
Oct 18 #Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 #Javascript
You might like
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
js实现蒙版效果
2020/01/11 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
用Python编写web API的教程
2015/04/30 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python实现控制台打印的方法
2019/01/12 Python
python实现图片彩色转化为素描
2019/01/15 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python如何基于redis实现ip代理池
2020/01/17 Python
Python操作Excel的学习笔记
2021/02/18 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
国际贸易专业求职信
2014/06/04 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL