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

最新推荐文章于 2025-03-13 15:34:46 发布

vcxiaohan2

最新推荐文章于 2025-03-13 15:34:46 发布

阅读量7.3k

点赞数 1

分类专栏： jQuery插件

本文链接：https://blog.youkuaiyun.com/u011500781/article/details/50219537

版权

jQuery插件专栏收录该内容

29 篇文章

订阅专栏

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

今天研究了下反应比较好的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="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="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="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="images/p4.jpg" width="100"></a>
	<script>

	</script>
</body>
</html>