JavaScript实现的开关灯泡点击切换特效示例

2024-05-06 16:53:08

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JavaScript实现的开关灯泡点击切换特效。分享给大家供大家参考，具体如下：

准备

首先要准备两张图片，一张是灯泡亮的图片，取名为on.jpg，另一张是灭的图片，取名为off.jpg，都放置到当前的目录下。

代码

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title></title>  <link rel="stylesheet" href="">  <script>    function change(){      var img = document.getElementById('img');      var src = img.src;      if(src.indexOf('on') >=0 ){        img.src = 'off.jpg';      }else{        img.src = 'on.jpg';      }    }  </script></head><body>  <h1>开关灯泡</h1>  <img id='img' src="on.jpg" onclick="change();" width='200' height="200"></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JavaScript实现的联动菜单特效示例

下一篇：js图片无缝滚动插件使用详解