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 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
使用Angular CLI生成路由的方法
Mar 24 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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生成静态页面详解
2006/11/19 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
js实例属性和原型属性示例详解
2014/11/23 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
如何用python处理excel表格
2020/06/09 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
中文系师范生自荐信
2013/10/01 职场文书
会计员岗位职责
2014/03/15 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
导游词之南京中山陵
2019/11/27 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python