特效描述:利用jQuery实现 点击弹窗 图片放大 预览查看。利用jQuery实现点击弹窗图片放大预览查看
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
点击任意图片使用插件
交互:ESC键关闭弹框,左键、右键和鼠标滚轮切换图片
![](images/0.png)
![](images/1.png)
![](images/2.png)
![](images/3.png)
![](images/4.png)
![](images/5.png)
$(function () {
$('.image-list').on('click', '.cover', function () {
var this_ = $(this);
var images = this_.parents('.image-list').find('.cover');
var imagesArr = new Array();
$.each(images, function (i, image) {
imagesArr.push($(image).children('img').attr('src'));
});
$.pictureViewer({
images: imagesArr, //需要查看的图片,数据类型为数组
initImageIndex: this_.index() + 1, //初始查看第几张图片,默认1
scrollSwitch: true //是否使用鼠标滚轮切换图片,默认false
});
});
});