javascript实现点亮灯泡特效示例


Posted in Javascript onOctober 15, 2019

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

javascript实现点亮灯泡特效示例

图片pic_bulbon.gif

javascript实现点亮灯泡特效示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
微信小程序如何实现五星评价功能
Oct 15 #Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 #Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 #Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 #Javascript
You might like
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jquery等待效果示例
2014/05/01 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Python OS模块常用函数说明
2015/05/23 Python
python监控进程脚本
2018/04/12 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
django 外键创建注意事项说明
2020/05/20 Python
详解KMP算法以及python如何实现
2020/09/18 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
一个SQL面试题
2014/08/21 面试题
电气自动化自荐信
2013/10/10 职场文书
学习十八大报告感言
2014/02/04 职场文书
鲜花方阵解说词
2014/02/13 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
Python基础之hashlib模块详解
2021/05/06 Python