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

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

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

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

实现

最开始以为插入个scipt？

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

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

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

综上所述，一行代码即可实现

<img id="cimg" src="https://www.w3school.com.cn/i/eg_bulboff.gif">

论坛禁止发推广链接
emm
这只是个效果示范（博客都没发良民啊）
看看效果

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

本帖最后由 mokson 于 2020-7-9 15:50 编辑

这只是HTML+JS的初级应用，其实对最后那个灯光，可以用以下代码实现不间断的打开及关闭效果：

<img id="cimg" src="https://www.w3school.com.cn/i/eg_bulboff.gif" onclick="(!window.a)?(document.getElementById('cimg').src='https://www.w3school.com.cn/i/eg_bulbon.gif',a=1):(document.getElementById('cimg').src='https://www.w3school.com.cn/i/eg_bulboff.gif',a=0)">
<br>
<p>鼠标移入亮，移出灭效果</p>
<img src="https://www.w3school.com.cn/i/eg_bulboff.gif" onmouseover="src='https://www.w3school.com.cn/i/eg_bulbon.gif'" onmouseout="src='https://www.w3school.com.cn/i/eg_bulboff.gif'">

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

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

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

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

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

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

海可以这样玩牛人

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

学习到了，膜拜大佬

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

还以为是什么搞端的，没想到是两张图片

江沉晚吟时. · 发表于 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

有点东西啊

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 一行代码实现点击图片改变

实现

免费评分

个人中心