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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍js实现图片轮播效果，包括了js实现图片轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲解了js实现图片轮播效果代码，分享给大家供大家参考，具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击 CSS样式： HTML布局( a标签最好加个title属性 )： JS脚本插件： 页面调用： 希望本文所
-
本文向大家介绍JS实现图片切换特效，包括了JS实现图片切换特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现图片切换的具体代码，供大家参考，具体内容如下 知识点： 1.window.onload网页全部加载完后再执行 2.获取元素 设置属性 3.临界情况判断 运行效果： 点击上一张下一章切换图片 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐
-
本文向大家介绍js css3实现图片拖拽效果，包括了js css3实现图片拖拽效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了css3实现图片拖拽效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js实现图片懒加载效果，包括了js实现图片懒加载效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js图片懒加载的具体代码，供大家参考，具体内容如下 图片懒加载，思路:当鼠标滑动到对应图片的高度时，进行图片的加载； 当有类似于瀑布流的布局时常用的加载模式 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JS实现图片手风琴效果，包括了JS实现图片手风琴效果的使用技巧和注意事项，需要的朋友参考一下 ''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。 推拉门收缩状态.png "推拉门"展开状态.png "推拉门"实现方法一：改变图片宽度 html+css代
-
本文向大家介绍JS实现图片幻灯片效果代码实例，包括了JS实现图片幻灯片效果代码实例的使用技巧和注意事项，需要的朋友参考一下 其效果是点击图片切换到下一张图片 首先准备五张图片 样式 js 其中用的是 fadeIn() -> 淡入 和 fadeOut()-> 淡出 两者效果叠加则可用 fadeToggle() fadeToggle() 方法在 fadeIn() -> 淡入 和 fadeOut()->