如何使用python,才能像人民日报的“点亮”武汉景点

前言

文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。

作者:Allen

PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http://t.cn/A6Zvjdun

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

昨晚,人民日报公众号推送了一篇文章,通过点击武汉的各个景点图片,可以将图片“点亮”,也就是通过点击将黑白色调的图还原为色彩绚丽的图

点击前后内容如下:

其实,我们只要有电脑就能实现啦,也不用装什么软件和编程环境。

首先,你可以准备几张需要的彩色图片,然后将他们放在一个文件夹中,例如我对应人民日报的武汉景点找了一些高清大图,按顺序命名好,如下图所示,放在了名为img的文件夹中:

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

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

然后以浏览器方式打开“点亮.html” 即可看到如下页面:

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

代码中首先通过-webkit-filter: grayscale(1);将所有图片样式设置为黑白。使用JavaScript的鼠标点击事件,当鼠标点击图片时,将设置黑白的样式去除,同时指定不是立刻去除,而是通过 transition: all 2s设定转变事件为2秒,所以当我们鼠标点击图片时,会发生颜色的渐变。

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

武汉加油!中国加油!

2020年最新Python教程:

如果你处于想学Python或者正在学习Python,Python的教程不少了吧,但是是最新的吗?

说不定你学了可能是两年前人家就学过的内容,在这小编分享一波2020最新的Python教程。

以上这些教程小编已经为大家打包准备好了,希望对正在学习的你有所帮助!

获取方式,私信小编 “ 资料 ”,即可免费获取哦!

如何使用python,才能像人民日报的“点亮”武汉景点的更多相关文章

  1. 《简明python教程》笔记一

    读<简明Python教程>笔记: 本书的官方网站是www.byteofpython.info  安装就不说了,网上很多,这里就记录下我在安装时的问题,首先到python官网下载,选好安装路 ...

  2. Python 启动本地服务

    在 Linux 服务器上或安装了 Python 的机器上,Python自带了一个WEB服务器 SimpleHTTPServer,我们可以很简单的使用  python -m SimpleHTTPServ ...

  3. 编译安装带ssl 模块指定版本Python

      出现这个或者fatal error: openssl/名单.h: No such file or directory.都是没有安装libssl-dev- libssl-dev包含libraries ...

  4. python批量处理excel文件数据

    https://www.zhihu.com/question/39299070?sort=created 作者:水中柳影链接:https://www.zhihu.com/question/392990 ...

  5. 简明python教程 --C++程序员的视角(四):容器类型(字符串、元组、列表、字典)和参考

    数据结构简介 Python定义的类型(或对象)层次结构在概念上可以划分为四种类别:简单类型.容器类型.代码类型 和内部类型. 可以将 PyObject 类之下的所有 Python 类划分为 Pytho ...

  6. python入门语法总结 zz

    http://renjie120.iteye.com/blog/680126 1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计 ...

  7. OK - A byte of python - 读书笔记

    看这本书的目的:再熟悉基本概念. 大部分都是知道,但是需要 明确 出来的 概念. - 欢迎吐槽错误,非常感谢. <A byte of python> - THIS 1. 组织行 - 形式: ...

  8. 【和我一起学python吧】python入门语法总结

    1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计算机使用的语言(二进制代码,即0和1).这个过程通过编译器和不同的标记.选项完 ...

  9. Python之数据结构篇

    简介: 数据结构是可以处理一些数据的结构,或者说,他们是用来存储一组相关数据的.在python中有三种内建的数据结构,分别是列表.元组合字典.我们将会学习如何使用它们是编程变得简单. 列表 list是 ...

随机推荐

  1. python对齐输出

    这个问题烦恼了挺久,一般情况下我都是用\t解决,但其实这样的办法并不是很nice,然后今天在写一个demo的时候实在看不下去,就百度科普了一波,确实是有比较nice的解决方案. 像这样: 令人十分难受 ...

  2. hdu1242 又又又是逃离迷宫(bfs模板题)

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1242/ 这次的迷宫是有守卫的,杀死一个守卫需要花费1个单位的时间,所以以走的步数为深度,在每一层进行搜索,由于走 ...

  3. HDU-4252 A Famous City(单调栈)

    最后更新于2019.1.23 A Famous City ?戳这里可以前往原题 Problem Description After Mr. B arrived in Warsaw, he was sh ...

  4. JMX(Java Management Extension)学习

    目录 基本概念 MBean的种类 StandardMBean DynamicBean ModelMBean JMX的实现方式 StandardMBean的使用方法 JMX服务的访问方式 JMX--No ...

  5. POJ - 1276 二进制优化多重背包为01背包

    题意:直接说数据,735是目标值,然后3是后面有三种钱币,四张125的,六张五块的和三张350的. 思路:能够轻易的看出这是一个多重背包问题,735是背包的容量,那些钱币是物品,而且有一定的数量,是多 ...

  6. 第 k 小的数

    一.寻找两个有序数组的中位数 1.1 问题描述 给定两个大小为 m 和 n 的不同时为空的有序数组 nums1 和 nums2.找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m ...

  7. JSP学习笔记(二)

    JSP内置对象 request对象 response对象 session对象 application对象 out对象 有些对象不用声明就可以在JSP页面的Java程序片和表达式部分使用,这就是JSP的 ...

  8. Java数据类型与mysql对应表

  9. Android | 教你如何用代码开发一个拍照翻译小程序

    引子   想必有很多小伙伴喜欢外出旅游,能去海外玩一圈那是更好不过了,旅游前大家一定会对吃.穿.住.行.游玩路线做各种攻略,然后满怀期待的出发- 想象中的旅游   出发前,想象中的旅游目的地可能有漂亮 ...

  10. Azure安装win2016的服务器,并下载安装mysql数据库心得

    随便写写 第一部分:新建虚拟机创建win2016服务器 这部分内容跟着微软云提示操作即可, 基本步骤:创建一堆名字,选择一个地区的服务器,配置一些基本信息,然后azure就会自动创建虚拟机并安装你选择 ...