点击小图片或者链接在本页显示大图片
点击图片，在本页面弹出窗口的格式显示次图片
html点击图片跳转页面显示大图
点击图片在弹出层显示大图
纯DOM ，不适用jQuery及其他技术 源码
在ECG项目中使用的是jQuery技术，当然没有自己敲。。。
演示页面：
点开页面之后 查看F12源码复制粘贴
JS函数：
console.log("没有买卖就没有杀害！！！吗？ [蝴蝶剑&轩]");
addLoadEvent(preparePicture_show);
addLoadEvent(preparePicture);
// 执行函数
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
// 将关闭、图片、文本等元素插入到显示区域
function preparePicture_show() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("picture_list")) return false;
var div1 = document.getElementById("div1");
// 关闭按钮
var close = document.createElement('button');
close.id = 'light';
close.onclick = function() {
close_show();
};
close.textContent = "关闭";
div1.appendChild(close);
// 图片
var picture_show = document.createElement("img");
picture_show.id = "picture_show";
picture_show.src = "image/0.jpg";
picture_show.alt = "第一张";
div1.appendChild(picture_show);
// 描述
var descripion = document.createElement("span");
descripion.id = "descripion";
var desctext = document.createTextNode("我是第一张");
descripion.appendChild(desctext);
div1.appendChild(descripion);
}
// 将所有图片点击的a标签集合绑定点击的事件
function preparePicture() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("picture_list")) return false;
var picture_list = document.getElementById('picture_list');
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return pictureShow(this) ? false : true;
}
}
}
// 显示点击的图片
function show() {
document.getElementById('div1').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
// 关闭图片
function close_show() {
console.log("关闭");
document.getElementById("div1").style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
// 将点击的图片链接与文本描述绑定在显示图片的区域中
function pictureShow(who) {
if (!document.getElementById('picture_show')) return false;
// 显示点击的图片
var source = who.href;
console.log("正在打开" + source);
// 获取到显示图片的位置
var picture_show = document.getElementById("picture_show");
if (picture_show.nodeName != 'IMG') return false;
picture_show.src = source;
// 显示出title
if (document.getElementById("descripion")) {
var text = who.title ? who.title : "没有描述";
var descripion = document.getElementById("descripion");
// 只修改文本
if (descripion.firstChild.nodeType == 3) {
descripion.firstChild.nodeValue = text;
}
}
show();
return true;
}
参考资料是 >>JavaScript_DOM编程艺术第二版（中文）.pdf
链接：https://pan.baidu.com/s/1xnW5FcBD0Nf4xEIoMgW9tg
提取码：rw7p
mui 点击小图放大，再次点击关闭：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.css" rel="stylesheet" />
<link rel="stylesheet" href="css/imageview.css" />
<link rel="stylesheet" href="css/mui.imageviewer.css" />
<style>
.bigimage{
height: 100px;
}
</style>
</head>
<body>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<img class="bigimage" src="0.jpg" data-preview-src="" data-preview-group="4">
<img class="bigimage" src="480x762.png" data-preview-src="" data-preview-group="4">
<li>
</ul>
<script src="../js/mui.js"></script>
<script type="text/javascript" src="js/mui.imageViewer.js"></script>
<script type="text/javascript" src="js/mui.previewimage.js"></script>
<script type="text/javascript" src="js/mui.zoom.js"></script>
<script type="text/javascript">
mui.init();
//点击图片放大（事件）
mui('.mui-table-view').on('tap', '.bigimage', function() {
mui.previewImage(); //调用函数
})
</script>
</body>
</html>
外链 资源：https://github.com/Yanglepin/imageView