javascript实现点亮灯泡特效示例
2019-10-15 18:08
2091 查看
本文实例为大家分享了javascript实现点亮灯泡特效的具体代码,供大家参考,具体内容如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name='description' content='本文来源于Apollo个人整理,仅供参考!'> <title>点亮灯泡</title> <style type="text/css"> div{ width: 500px; height: 400px; background-color:lightgoldenrodyellow; } </style> </head> <body> <div> <img id="demo" src="./pic_bulboff.gif" alt="灯泡"> </div> <script> document.getElementById('demo').onclick = function () { ele = document.getElementById('demo'); if (ele.src.match('bulbon')){ ele.src = './pic_bulboff.gif'; }else{ ele.src = './pic_bulbon.gif'; } } </script> </body> </html>
图片pic_bulboff.gif
图片pic_bulbon.gif
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- JavaScript实现的开关灯泡点击切换特效示例
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- 纯JavaScript实现HTML5 Canvas六种特效滤镜示例
- JavaScript实现的联动菜单特效示例
- 纯JavaScript实现HTML5 Canvas六种特效滤镜示例
- JavaScript实现的鼠标跟随特效示例【2则实例】
- javascript实现带节日和农历的日历特效
- 同一个网页中实现多个JavaScript特效的方法
- javascript dom追加内容实现示例
- JavaScript实现公历转农历功能示例
- JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
- 【前端】javascript实现鼠标跟随特效
- javascript中实现继承的示例二
- 实现年月日下拉菜单的javascript代码示例
- JavaScript实现的反序列化json字符串操作示例
- 新年快乐! javascript实现超级炫酷的3D烟花特效
- 纯JavaScript基于notie.js插件实现消息提示特效
- JavaScript实现无限级递归树的示例代码