一、layui组件下载地址
Layui镜像站-经典开源模块化前端 UI 框架(官方文档完整镜像)
二、实现
1.js方法
$(document).on('click', '.preview',function(data){
var obj = data.target.dataset;
switch (obj.type) {
case 'image':
layer.photos({
photos: {
"title":'预览图',
"id":222,
"start":0,
"data":[{
"src": obj.url
}]
}
});
break;
case 'mp4':
var loadstr = '<video width="100%" height="100%" controls="controls" autobuffer="autobuffer" autoplay="autoplay" loop="loop">' +
'<source src="'+ obj.url +'" type="video/mp4"></source></video>'
layer.open({
type: 1,
title: '播放视频',
area:['800px','auto'],
content: loadstr,
});
break;
case 'file':
window.location.href = obj.url;
break;
}
});
2.html
//视频
<label>视频地址:<small class="preview" data-type="mp4" data-url="视频地址">预览</small></label>
//图片
<label>图片地址:<small class="preview" data-type="image" data-url="图片地址">预览</small></label>
//附件
<label>附件地址:<small class="preview" data-type="file" data-url="附件地址">预览</small></label>