网站 › 『编程语言区』 › 一行代码实现点击图片改变

Ldfd 发表于 2020-7-8 19:38

一行代码实现点击图片改变

本帖最后由 Ldfd 于 2020-7-8 22:09 编辑

已知缺点：渐变不方便，可用gif实现

## 实现

最开始以为插入个scipt？

监视图片是否点击，恰好有个例子，emm，看不懂下一个

后来想到<img 后面带的一大堆应该就可以，没想到真可以

1. onclick判断点击
2. getElementById('ID')获取标签
3. 在2后面加".src='链接'"实现改变

综上所述，一行代码即可实现
```html
<img id="cimg" src="https://www.w3school.com.cn/i/eg_bulboff.gif">
```
论坛禁止发推广链接
emm
这只是个效果示范（博客都没发良民啊）
看看效果

mokson 发表于 2020-7-9 15:42

Ldfd 发表于 2020-7-9 18:43

mokson 发表于 2020-7-9 15:42
这只是HTML+JS的初级应用，其实对最后那个灯光，可以用以下代码实现不间断的打开及关闭效果：




多加几个属性改变，是个思路，其实我最开始想做成“点亮武汉”那种效果，但是svg确实挺繁琐，有没有微信那种弱智编辑器

芥末芥末 发表于 2020-7-8 19:46

我去网站首页的github里发现了不得了的东西:lol

jipinfeche 发表于 2020-7-8 19:56

海可以这样玩牛人

jc021227 发表于 2020-7-8 20:14

学习到了，膜拜大佬

JieW_L 发表于 2020-7-8 20:19

还以为是什么搞端的，没想到是两张图片https://cdn.jsdelivr.net/gh/hishis/forum-master/public/images/patch.gif

江沉晚吟时. 发表于 2020-7-8 20:32

感谢分享

MOEYU_VANILLA 发表于 2020-7-8 20:32

感谢分享

Ldfd 发表于 2020-7-8 20:42

JieW_L 发表于 2020-7-8 20:19
还以为是什么搞端的，没想到是两张图片

要不来个svg？小白勿喷

水到渠成的执着 发表于 2020-7-8 20:43

做行内的点击事件啊,不错哈

huomavip 发表于 2020-7-8 20:46

有点东西啊

查看完整版本: 一行代码实现点击图片改变