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

本文实例讲述了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 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 = 'https://www.jb51.net/article/on.jpg'; } } </script> </head> <body> <h1>开关灯泡</h1> <img src="https://www.jb51.net/article/on.jpg"> </body> </html>

运行结果图

这里写图片描述


这里写图片描述

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a7877f451c2e9364bb44ea5690342c0c.html