人民日报的“点亮”武汉景点,是怎么实现的?

4月8日零时起,武汉解除了离汉离鄂通道管控措施,有序恢复对外交通。“封城”76天后,武汉与外界的通道重新开启。

7日晚上,人民日报公众号推送了一篇文章,通过点击武汉的各个景点图片,可以将图片“点亮”。

点击前后内容如下:

人民日报的“点亮”武汉景点,是怎么实现的?

人民日报的“点亮”武汉景点,是怎么实现的?

实际上,我们只要有电脑就能实现这种效果。

首先,准备几张彩色图片,然后将他们放在一个文件夹中,如下图所示,放在了名为img的文件夹中:

人民日报的“点亮”武汉景点,是怎么实现的?

之后新建一个html文件,内部写入如下代码:

人民日报的“点亮”武汉景点,是怎么实现的?

人民日报的“点亮”武汉景点,是怎么实现的?

例如我将该文件保存为“点亮.html”,将该文件与img文件夹放在同一路径下。

用浏览器打开“点亮.html” 即可看到如下页面:

人民日报的“点亮”武汉景点,是怎么实现的?

当你鼠标点击图片时,图片会从黑白慢慢渐变转为彩色,如下图所示:

人民日报的“点亮”武汉景点,是怎么实现的?

原理就是这么简单~快来和青莲君一起尝试一下吧!

武汉加油!中国加油!


分享到:


相關文章: