如何用JavaScript实现网页图片渐隐消失效果？

2026-04-05 09:528阅读0评论SEO基础

内容介绍
文章标签
相关推荐

本文共计710个文字，预计阅读时间需要3分钟。

本文以一个具体实例为基础，分享了如何使用JavaScript实现页面图片删除功能。以下是大家的参考代码：

javascript// 获取所有图片元素var images=document.querySelectorAll('img');

// 为每个图片元素绑定点击事件images.forEach(function(img) { img.addEventListener('click', function() { // 移除图片元素 img.remove(); });});

最近两天进行测试时，发现自己对JavaScript还不够熟悉。因此，今天上传了这篇文章，重新整理了一下JavaScript模块中的内容。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：实现页面消除效果本文