美文网首页
简单的JS动效——点击灯泡使其点亮或熄灭

简单的JS动效——点击灯泡使其点亮或熄灭

作者: liyao丶 | 来源:发表于2018-09-09 19:35 被阅读0次


简单的JS动效——点击灯泡使其点亮或熄灭

我们需要准备的素材有:2张灯泡图片,状态分别是点亮和熄灭,图片宽高必须一致。

首先打开页面是这个已经点亮的状态

当我们点击他时,就会呈现出这个样子。


下面让我们来学习如何实现吧!

首先,写好页面布局。

插入图片:<img src="light_on.gif" onclick="changeimage()" id="myimage">

这里插入的图片是已经点亮的状态,设置一个点击事件为"changeimage"  id为"myimage"

然后再下方写下<p>点击灯泡使其点亮或熄灭</p>这个简单的页面布局就弄好了,接下来是js代码。

首先,写一个function changeimage()

然后用document.getElementById获取要选择的ID,上面我们ID写为"myimage"

然后用if判断条件,当match(匹配)到light_on.gif,就表示当前图片匹配,则应该点击时更换图片,所以写上element.src="light_off.gif"来更换为熄灭的图片。

否则,else更换为点亮的图片,然后我们的整个页面就可以实现灯泡的点亮了!

希望各位对各位读者老爷有所帮助,不足之处欢迎提出一起进步。

相关文章

  • 简单的JS动效——点击灯泡使其点亮或熄灭

    简单的JS动效——点击灯泡使其点亮或熄灭 我们需要准备的素材有:2张灯泡图片,状态分别是点亮和熄灭,图片宽高必须一...

  • 论状态动效中的信息传递

    首先我们简单的先将游戏内动效分为两类:“状态”动效和“行为”动效。状态动效:永远单向传递信息行为动效:动效基于交互...

  • 视觉设计(个人作品)

    请点击视频查看动效设计

  • Chart.js - 漂亮的 Javascript 图表开源库

    这是一个使用简单、动效现代酷炫js图表库,用来构建专业美观的数据图表。 介绍 Chart.js 是一个基于 can...

  • css简单动效

    简单的css3动效 直接上代码 摆钟 景色动效 相册 模拟ios手机相册吸附效果

  • 【AE教程】动效

    01 动效分层思考 动效很考验一个人的整理能力,内容过于复杂时,设计师很容易蒙圈,为了使其简化,我经常使用分层思考...

  • 常用简单的动效

    两种加载动效 输入框抖动动效 核心动效 转场动画 进度条动画

  • UI交互动画:纵享丝滑,不止是德芙

    UI界面视觉已然走到了一端,但动效在移动用户体验领域却逐步走向高峰。动效已成为用户界面的重要组成部分,使其更具互动...

  • 点亮灯泡 点亮生命

    这一周的科学实验用品,我们早早的准备好了,刘自东从他家里带来了电池,我鼓励孩子们都能准备到材料,这样每...

  • 动效 JS 知识备份

    1,animateplus CSS and SVG animation library 2,Dynamics.js...

网友评论

      本文标题:简单的JS动效——点击灯泡使其点亮或熄灭

      本文链接:https://www.haomeiwen.com/subject/jqudgftx.html