点击图片全屏预览
<div class="answerDetail_img">
<img src="" class="answer_imgList">
</div>
<script src="/static/index/js/previewImage.min.js"></script>
let imgAll = {};
imgAll.all = function(selector, contextElement) {
var nodeList,list = [];
if (contextElement) {
nodeList = contextElement.querySelectorAll(selector);
} else {
nodeList = document.querySelectorAll(selector);
}
if (nodeList && nodeList.length > 0) {
list = Array.prototype.slice.call(nodeList);
}
return list;
}
imgAll.delegate = function(imgAllel, eventType, selector, fn) {
if (!imgAllel) { return; }
imgAllel.addEventListener(eventType, function(e) {
var targets = imgAll.all(selector, imgAllel);
if (!targets) {
return;
}
for (var i=0; i<targets.length; i++) {
var imgAllnode = e.target;
while (imgAllnode) {
if (imgAllnode == targets[i]) {
fn.call(imgAllnode, e);
break;
}
imgAllnode = imgAllnode.parentNode;
if (imgAllnode == imgAllel) {
break;
}
}
}
}, false);
};
let imgMain = document.querySelectorAll('.answer_imgList')
var urls = [];
imgMain.forEach(function(v,i){
urls.push(v.src);
})
imgAll.delegate(document.querySelector('.answerDetail_img'), 'click','.answer_imgList',function(){
var current = this.src;
var obj = {
urls,
current
};
previewImage.start(obj);
});