js实现页面图片消除效果
作者：xiuxiuxiulai 时间：2024-04-28 10:20:54
本文实例为大家分享了js实现页面图片消除的具体代码，供大家参考，具体内容如下
前两天测试的时候发现自己对js还不是太熟悉，所以今天上传的了这篇文章，重新写了一下js模块里面的东西。
核心还是这一部分：
i = 0
last = null
function clickDisappear(obj){
if(i==0 && last==null){
i =1
last=obj
}
else{
if(obj != last){
if(obj.src == last.src){
obj.style.display='none'
last.style.display='none'
}
i = 0
last = null
}
}
}
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
margin: 9px;
float: left;
width: 32px;
height: 32px;
}
</style>
<script type="text/javascript">
// DOM模型：文档对象模型
i = 0
last = null
function clickDisappear(obj){
if(i == 0 && last == null){
last = obj
i = 1
}else{
if(obj != last){
if(obj.src == last.src){
obj.style.display = 'none'
last.style.display = 'none'
}
i = 0
last = null
}
}
}
</script>
</head>
<body >
<table cellpadding="0" cellspacing="1" style="border:solid 1px red;background-color: red;" >
<caption>图片消除</caption>
<thead>
<tr valign="middle" align="center" >
<!--<th colspan="2">1</th>-->
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
</thead>
<tbody style="background-color: royalblue;" >
<tr valign="middle" align="center" >
<td><img src="img/bg-0092.gif" onclick="clickDisappear(this)"></td>
<td><img src="img/bg-0704.gif" onclick="clickDisappear(this)"></td>
<td><img src="img/bg-0704.gif" onclick="clickDisappear(this)"</td>
<td><img src="img/bg-0884.gif" onclick="clickDisappear(this)"</td>
<td><img src="img/bg-0884.gif" onclick="clickDisappear(this)"</td>
<td><img src="img/bg-0092.gif" onclick="clickDisappear(this)"</td>
<td><img src="img/bg-0704.gif" onclick="clickDisappear(this)"</td>
<td><img src="img/bg-0884.gif" onclick="clickDisappear(this)"</td>
<td><img src="img/bg-0884.gif" onclick="clickDisappear(this)"</td>
<td><img src="img/bg-0092.gif" onclick="clickDisappear(this)"</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>
来源：https://blog.csdn.net/xiuxiuxiulai/article/details/102244025
标签：js,图片消除
0
投稿猜你喜欢
用asp实现的代码批量修改程序
2007-09-24 13:31:00
Python使用微信SDK实现的微信支付功能示例
2022-09-22 00:19:41
Python OpenCV超详细讲解读取图像视频和网络摄像头
2023-11-26 05:22:36
利用Python如何实时检测自身内存占用
2023-01-11 03:12:02
js重写alert事件（避免alert弹框标题出现网址）
2024-05-08 09:32:43
Python Django教程之模型中字段验证详解
2021-01-04 18:56:48
CentOS7开启MySQL8主从备份、每日定时全量备份(推荐)
2024-01-15 20:31:18
Python实现自定义读写分离代码实例
2023-04-19 14:34:57
Python实现MySql数据库交互的示例
2024-01-23 02:41:13
Django框架配置mysql数据库实现过程
2024-01-20 00:35:23
Chrome插件开发系列一：弹窗终结者开发实战
2024-04-29 13:42:04
python实现单机五子棋对战游戏
2022-01-11 04:38:10
python调用API接口实现登陆短信验证
2021-03-13 00:04:03
使用 Osql 工具管理 SQL Server 桌面引擎 (MSDE 2000)应用介绍
2020-07-01 22:12:59
求英文字母或数字或下划线或汉字的js正则表达式
2009-08-04 17:59:00
django实现同一个ip十分钟内只能注册一次的实例
2021-03-07 03:13:37
mysql用户创建与授权的简单实例
2024-01-18 00:20:18
如何在Python 游戏中模拟引力
2021-11-28 21:51:27
Python得到弹幕并保存到Excel中怎么设置
2021-04-04 16:42:22
Python编程中的反模式实例分析
2021-02-01 09:54:26