js实现页面图片消除效果
作者：xiuxiuxiulai 发布时间：2024-04-28 10:20:54
标签：js,图片消除
本文实例为大家分享了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
0
投稿猜你喜欢
- 本文实例为大家分享了python如何删除文件中重复字段的具体代码，供大家参考，具体内容如下原文件内容放在list中，新文件内容按行查找，如果
本文实例讲述了Python生成随机数组的方法。分享给大家供大家参考，具体如下：研究排序问题的时候常常需要生成随机数组来验证自己排序算法的正确- 本文实例为大家分享了OpenCV实现相机标定的具体代码，供大家参考，具体内容如下一、相机与 * 相机模型1.相机模型现代科技加持下的相机已经成
- 参数数量及其作用该函数共有十一个参数，常用的有：名称 name变量规格 shape变量类型 dtype变量初始化方式 initializer
- 最近发现一个很有意思的画图的python库，叫做turtle，这里先说下用turtle这个库来实现用正方形画圆的思路。每次都用乌龟（turt
- SQL Server执行动态SQL的话,应该如何实现呢?下面就为您介绍SQL Server执行动态SQL两种正确方式,希望可以让您对SQL
- 目录前言typeof是否能正确判断类型？instanceof是否能正确判断类型？Object.prototype.toString.call
- 对数据库的操作无非就是增删改查，其中数查询操作最为复杂，所以将查询单独讲解，我这里用的Mysql数据库增删改查操作分页查询操作1.查询结果以
- 概述前段时间突然发现，我之前对git stash的使用都是错误的。具体说来，我是这么使用的：在远端有新的提交，需要git pull来拉取合并
- 回顾 MySQL / InnoDB 的改善历史。你能很容易发现。在MySQL 5.6稳定版本中从来没有在read-only 这么
- 一 环境阿里云服务器: CentOS 7.4 64位(基于RedHat)本机: macOS High Sierra二 压缩包JDK
- python 爬虫解决403禁止访问错误在Python写爬虫的时候，html.getcode()会遇到403禁止访问的问题，这是网站对自动化
- tensorflow支持14种不同的类型，主要包括：实数：tf.float32 tf.float64整数：tf.int8 tf.int16
- 背景目前项目在移动端上，首推使用微信小程序。各项目的小程序访问数据有必要进行采集入库，方便后续做统计分析。虽然阿拉丁后台也提供了趋势分析等功
- BEGIN -- 声明变量 DECLARE v_addtime_begin varchar(13); DECLARE v_addtime_e
- 1. ES语法的getter和setter在开始了解 Vue 的数据响应式原理前应该先搞清楚 ES语法 中的 getter 和 setter
- 1、grid 布局说明：参数说明： sticky：在插件正常尺寸下，分配单元中多余的空间（如果没有声明属性，默认插
- 实验环境：windows 7，anaconda 3(python 3.5)，tensorflow（gpu/cpu）函数介绍：所用函数为six
- 导语由于之前遇到过几次有关于参数类型的坑，以及经常容易把一些参数类型搞混淆，现在做一下有关参数类型的总结记录以及对之前踩坑经历的分析。参数类
- 前言前面我们已经将GO的环境安装好了，那么是否可以进行开发了呢？可以，但是为了能够更高效率的开发，我们还需要下载一个软件，该软件的作用就是方
