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