您的位置：首页 > Web前端 > JQuery

【JQuery】图片灯箱插件——lightBox

2016-04-08 18:09 766 查看

这个真的超级有用！

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。

<body>
<div id="divtest">
<div class="title">
<span class="fl">我的相册</span>
</div>
<div class="content">
<div class="divPics">
<ul>
<li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
<img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
<img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
<img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
</a></li>
</ul>
</div>
</div>
</div>

<script type="text/javascript">
$(function () {
$(".divPics a").lightBox({
overlayBgColor: "red", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 100 //图片切换时的速度
})
});
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航