<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
float: left;
width: 200px;
height: 200px;
margin: 5px;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 抓所有的图片
var imgs = document.getElementsByTagName('img');
// 循环所有的图片,给每张图片都加单击事件
for (var t=0;t<imgs.length;t++) {
// 给t号图片添加一个变量,用来记录序号
imgs[t].xuhao = t;
// 给t图片加单击事件
imgs[t].onclick = function(){
alert(this.xuhao);
// 点击图片消失,位置不保留
// this.style.display = 'none';
// 点击图片消失,位置保留
this.style.visibility = 'hidden';
}
}
}
</script>
</head>
<body>
<!--img[src=images/$.jpg]*20 快捷写法-->
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840509108737.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840509137756.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840509164082.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510127179.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510188979.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510935198.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840510435945.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840511145712.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840511150837.png" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903061551840511174371.png" alt="" />
</body>
</html>
1、上面代码有注解，步骤方法写得很清楚，最终效果点（运行代码）来看
原文链接：https://www.qiquanji.com/post/7585.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知