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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 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读取RSS feed的代码
2008/08/01 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
用javascript操作xml
2006/11/04 Javascript
一个对于js this关键字的问题
2007/01/09 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
vue的keep-alive用法技巧
2019/08/15 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
构建Python包的五个简单准则简介
2015/06/15 Python
python制作最美应用的爬虫
2015/10/28 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Django中使用Celery的方法示例
2018/11/29 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
QA工程师岗位职责
2013/11/20 职场文书
高三地理教学反思
2014/01/11 职场文书
教师档案管理制度
2014/01/23 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
护理心得体会范文
2016/01/22 职场文书
建房合同协议书
2016/03/21 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL