灯箱效果lightbox.js的使用示例

灯箱效果想必大家都很熟悉，平常用的也会比较多。

今天研究了下反应比较好的jquery插件lightbox.js，虽然界面效果不错，但是也有缺点

兼容性：各大浏览器和ie6+

不足：

1由于我们使用时是直接在html里写data-lightbox属性调用它，所以如果需要修改自定义参数，只能修改源码

2没有考虑窗口缩放事件

具体示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><link rel="stylesheet" href="css/lightbox.css"><script src="js/jquery-1.11.3.min.js"></script><script src="js/lightbox.js"></script></head>
<style>* {padding: 0; margin: 0;}
</style>
<body><!--单个图片--><a href="images/p1.jpg" data-lightbox="e1" data-title="Click the right half of the image to move forward."><img src="data:images/p1.jpg" width="100"></a>

<span style="white-space:pre">  </span><!--多张图片--><a href="images/p2.jpg" data-lightbox="e2" data-title="Click the right half of the image to move forward."><img src="data:images/p2.jpg" width="100"></a><a href="images/p3.jpg" data-lightbox="e2" data-title="Click the right half of the image to move forward."><img src="data:images/p3.jpg" width="100"></a><a href="images/p4.jpg" data-lightbox="e2" data-title="Click the right half of the image to move forward."><img src="data:images/p4.jpg" width="100"></a><script></script>
</body>
</html>

灯箱效果lightbox.js的使用示例相关推荐

jQuery lightBox plugin 灯箱效果
一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery lightBox v0.5 注意事项: 1.需载入 css 文件,配合使用(也可以合并到你的 css 文件中) 2.链 ...
灯箱效果(点击小图弹出大图集然后轮播)
<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8&q ...
js 拖动层示例[转]
共享一个简单的JS拖动层效果,支持ie,ff,opera,safari: ie有专门的拖动方法:dragstart,drag,dragend分别是开始拖动,拖动,结束拖动.但是其他浏览器(dom类,例 ...
Lightbox JS v2.0
概要: Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器. 最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松 ...
php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法
本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...
frameset ajax,js控制frameSet示例
js控制frameSet示例 1:js修改frameset的cols属性来达到修改各个页面所占的宽高,例如隐藏当前frame页. 复制代码代码如下: window.parent.document.g ...
js模块封装示例_AngularJS模块教程示例
js模块封装示例 In this post, we are going to cover one of the most important feature in AngularJS called M ...
canvas下雪效果(原生js)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...

灯箱效果lightbox.js的使用示例

灯箱效果lightbox.js的使用示例相关推荐

最新文章

热门文章