0%

js图片点击放大效果

发表于 分类于

文章字数：101,阅读全文大约需要1分钟

类似qq空间图片点击放大（灯箱效果）

引入

1
2
<script type="text/javascript" src="js/lightbox/lightbox.min.js"></script>
<link href="js/lightbox/css/lightbox.css" rel="stylesheet" />

单张图片

1
2
3
<a href="img/image-1.jpg" data-lightbox="img1" data-title="图片一">
        <img src="xxx" title="缩略图">
</a>

图片组（组内可以切换）

1
2
3
4
<a href="img/image-1.jpg" data-lightbox="group2" data-title="图片标题一">缩略图...</a>
<a href="img/image-2.jpg" data-lightbox="group2" data-title="图片标题二">缩略图...</a>
<a href="img/image-3.jpg" data-lightbox="group2" data-title="图片标题三">缩略图...</a>
<a href="img/image-4.jpg" data-lightbox="group2" data-title="图片标题四">缩略图...</a>