js實現(xiàn)頁面圖片消除效果
本文實例為大家分享了js實現(xiàn)頁面圖片消除的具體代碼,供大家參考,具體內(nèi)容如下
前兩天測試的時候發(fā)現(xiàn)自己對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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript DOM設(shè)置樣式詳細說明和示例代碼
JavaScript也可以用來修改DOM元素的樣式,我們可以使用style屬性來訪問和修改元素的樣式屬性,這篇文章主要給大家介紹了關(guān)于javascript DOM設(shè)置樣式詳細說明和示例代碼的相關(guān)資料,需要的朋友可以參考下2024-06-06JS數(shù)組操作大全對象數(shù)組根據(jù)某個相同的字段分組
這篇文章主要介紹了JS數(shù)組操作大全對象數(shù)組根據(jù)某個相同的字段分組,需要注意的是,在開發(fā)過程這種數(shù)組的處理函數(shù),應(yīng)當被編寫到項目的公共工具函數(shù)庫中全局調(diào)用,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-11-11靜態(tài)頁面實現(xiàn) include 引入公用代碼的示例
下面小編就為大家?guī)硪黄o態(tài)頁面實現(xiàn) include 引入公用代碼的示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09firefox中用javascript實現(xiàn)鼠標位置的定位
firefox中用javascript實現(xiàn)鼠標位置的定位...2007-06-06javascript實現(xiàn)在指定元素中垂直水平居中
當談到網(wǎng)頁的布局中,居中問題一直得不到很有效的解決,居中通常是相對于某一個元素的,比如我們經(jīng)常所說的屏幕居中的問題,我們了解父元素的信息越多,我們就越能更加容易的實現(xiàn)居中布局。下面我們通過具體的實例來看看javascript如何來實現(xiàn)垂直水平居中2015-09-09淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02