js实现页面图片消除效果


Posted in Javascript onMarch 24, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
javascript数组去重小结
Mar 07 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
浅谈js闭包理解
Apr 01 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
JS函数式编程实现XDM一
Jun 16 Javascript
js实现消灭星星(web简易版)
Mar 24 #Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 #Javascript
javascript实现滚动条效果
Mar 24 #Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 #Javascript
JS实现点星星消除小游戏
Mar 24 #Javascript
js实现小星星游戏
Mar 23 #Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 #Javascript
You might like
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
在python中安装basemap的教程
2018/09/20 Python
python实现flappy bird小游戏
2018/12/24 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python sep参数使用方法详解
2020/02/12 Python
Python tcp传输代码实例解析
2020/03/18 Python
Python如何读写二进制数组数据
2020/08/01 Python
初二物理教学反思
2014/01/29 职场文书
学校安全责任书范本
2014/07/23 职场文书
给学校的建议书400字
2015/09/14 职场文书
导游词之西安骊山
2019/12/03 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS