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 相关文章推荐
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php通过文件流方式复制文件的方法
2015/03/13 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
js螺旋动画效果的具体实例
2013/11/15 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python实现的各种常见分布算法示例
2018/12/13 Python
python绘制多个子图的实例
2019/07/07 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
写给保洁员表扬信
2014/01/08 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA