js實(shí)現(xiàn)頁面圖片消除效果

更新時(shí)間：2020年03月24日 10:15:27 作者：xiuxiuxiulai

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)頁面圖片消除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)頁面圖片消除的具體代碼，供大家參考，具體內(nèi)容如下

前兩天測(cè)試的時(shí)候發(fā)現(xiàn)自己對(duì)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模型：文檔對(duì)象模型
  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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js消除圖片小游戲代碼

相關(guān)文章

js實(shí)現(xiàn)九宮格拼圖小游戲
本文主要分享了js實(shí)現(xiàn)九宮格拼圖小游戲的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
js 下拉菜單實(shí)現(xiàn)代碼
js 下拉菜單實(shí)現(xiàn)代碼，原理比較簡(jiǎn)單，需要的朋友可以參考下，具體的美化要靠自己。
2010-05-05
JS實(shí)現(xiàn)多重選項(xiàng)卡切換輪播圖
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)多重選項(xiàng)卡切換輪播圖制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
js實(shí)現(xiàn)圖片無縫滾動(dòng)
這篇文章主要介紹了Javascript圖片無縫滾動(dòng)的相關(guān)內(nèi)容,感興趣的小伙伴們可以參考一下
2015-12-12
javascript中異常處理案例(推薦)
下面小編就為大家?guī)硪黄猨avascript中異常處理案例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
js判斷在哪個(gè)瀏覽器打開項(xiàng)目的方法
這篇文章主要介紹了js判斷在哪個(gè)瀏覽器打開項(xiàng)目的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
easyui-combobox 實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)補(bǔ)全功能示例
下面小編就為大家?guī)硪黄猠asyui-combobox 實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)補(bǔ)全功能示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，
2016-11-11
JavaScript中遍歷跳出循環(huán)方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中遍歷跳出循環(huán)方法的相關(guān)資料,一想到想到循環(huán)的跳出,立馬就會(huì)想到三個(gè)關(guān)鍵,break、return、continue,在業(yè)務(wù)中也會(huì)需要在遍歷的時(shí)候退出循環(huán),需要的朋友可以參考下
2023-12-12
js解析xml字符串和xml文檔實(shí)現(xiàn)原理及代碼(針對(duì)ie與火狐)
分別針對(duì)ie和火狐分別作了對(duì)xml文檔和xml字符串的解析,考慮到了瀏覽器的兼容性,至于在ajax環(huán)境下解析xml，其實(shí)原理是一樣的，只不過放在了ajax里，還是要對(duì)返回的xml進(jìn)行解析,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)js解析xml有所幫助
2013-02-02