JavaScript实现的开关灯泡点击切换特效示例
2019-07-08 11:11
1281 查看
本文实例讲述了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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JavaScript实现的简单Tab点击切换功能示例
- javascript点击按钮实现隐藏显示切换效果
- JavaScript实现多个重叠的层点击切换效果
- javascript实现标签切换代码示例
- JavaScript特效——开关灯泡
- Android 使用jQuery实现item点击显示或隐藏的特效的示例
- javascript实现tab响应式切换特效
- jQuery实现的点击标题文字切换字体效果示例【测试可用】
- 纯JavaScript实现HTML5 Canvas六种特效滤镜示例
- javascript结合CSS实现苹果开关按钮特效
- 使用JavaScript实现点击循环切换图片效果
- JavaScript实现图片滑动切换的代码示例分享
- unity3d实现一个人物跟随鼠标点击地面那点就移动那点,实现点击特效加人物动画方向的切换。
- 纯JavaScript实现HTML5 Canvas六种特效滤镜示例
- JavaScript实现点击出现图片并统计点击次数功能示例
- JavaScript实现点击按钮切换网页背景色的方法
- 关于使用JavaScript实现图片点击切换(附带改变导航图片 方案一)
- JavaScript实现在网页上点击鼠标生成气泡特效
- javascript点击按钮实现隐藏显示切换效果
- 关于使用JavaScript实现图片点击切换(附带改变导航图片 方案二)