如何使用python,才能像人民日报的“点亮”武汉景点
如何使用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,才能像人民日报的“点亮”武汉景点的更多相关文章
- 《简明python教程》笔记一
读<简明Python教程>笔记: 本书的官方网站是www.byteofpython.info 安装就不说了,网上很多,这里就记录下我在安装时的问题,首先到python官网下载,选好安装路 ...
- Python 启动本地服务
在 Linux 服务器上或安装了 Python 的机器上,Python自带了一个WEB服务器 SimpleHTTPServer,我们可以很简单的使用 python -m SimpleHTTPServ ...
- 编译安装带ssl 模块指定版本Python
出现这个或者fatal error: openssl/名单.h: No such file or directory.都是没有安装libssl-dev- libssl-dev包含libraries ...
- python批量处理excel文件数据
https://www.zhihu.com/question/39299070?sort=created 作者:水中柳影链接:https://www.zhihu.com/question/392990 ...
- 简明python教程 --C++程序员的视角(四):容器类型(字符串、元组、列表、字典)和参考
数据结构简介 Python定义的类型(或对象)层次结构在概念上可以划分为四种类别:简单类型.容器类型.代码类型 和内部类型. 可以将 PyObject 类之下的所有 Python 类划分为 Pytho ...
- python入门语法总结 zz
http://renjie120.iteye.com/blog/680126 1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计 ...
- OK - A byte of python - 读书笔记
看这本书的目的:再熟悉基本概念. 大部分都是知道,但是需要 明确 出来的 概念. - 欢迎吐槽错误,非常感谢. <A byte of python> - THIS 1. 组织行 - 形式: ...
- 【和我一起学python吧】python入门语法总结
1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计算机使用的语言(二进制代码,即0和1).这个过程通过编译器和不同的标记.选项完 ...
- Python之数据结构篇
简介: 数据结构是可以处理一些数据的结构,或者说,他们是用来存储一组相关数据的.在python中有三种内建的数据结构,分别是列表.元组合字典.我们将会学习如何使用它们是编程变得简单. 列表 list是 ...
随机推荐
- python学习之BeautifulSoup模块爬图
BeautifulSoup模块爬图学习HTML文本解析标签定位网上教程多是爬mzitu,此网站反爬限制多了.随意找了个网址,解析速度有些慢.脚本流程:首页获取总页数-->拼接每页URL--> ...
- latex中文支持ubuntu
latex安装: sudo apt install texlive-full 中文字体安装: sudo apt-get install latex-cjk-all 字体包中包含bsmi,bk ...
- 从零开始实现穿衣图像分割完整教程(附python代码演练)
时装业是人工智能领域很有前景的领域.研究人员可以开发具有一定实用价值的应用.我已经在这里展示了我对这个领域的兴趣,在那里我开发了一个来自Zalando在线商店的推荐和标记服装的解决方案. 在这篇文章中 ...
- 编译原理:DFA最小化,语法分析初步
1.将DFA最小化:教材P65 第9题 解析: 2.构造以下文法相应的最小的DFA S→ 0A|1B A→ 1S|1 B→0S|0 解析: S→ 0A|1B →S → 0(1S|1)|1(0S|0 ...
- windows10远程桌面,出现“出现身份验证错误 要求的函数不受支持...”等错误解决方法
windows家庭普通版,更新补丁后无法远程连接windows server2012,出现以下报错: 解决方法: 1.win + R打开运行,输入 regedit,回车进入注册表 2.找到以下路径 \ ...
- python实现十大经典排序算法
Python实现十大经典排序算法 代码最后面会给出完整版,或者可以从我的Githubfork,想看动图的同学可以去这里看看: 小结: 运行方式,将最后面的代码copy出去,直接python sort. ...
- mavlink协议移植问题
mavlink协议移植问题 mavlink源代码是一个代码库,使用的时候只需要将mavlink.h头文件包含到工程项目中即可. mavlink通信协议是无状态的连接,一般采用心跳消息跟踪系统是否存在. ...
- 关于 JavaScript 的 精度丢失 与 近似舍入
一.背景 最近做 dashborad 图表时,涉及计算小数且四舍五入精确到 N 位.后发现 js 算出来的结果跟我预想的不一样,看来这里面并不简单-- 二.JS 与 精度 1.精度处理 首先明确两点: ...
- [vijos1782]借教室<线段树>
题目链接:https://vijos.org/p/1782 题意:一个区间1,n.m次操作,每次操作让l,r区间值减去d,当有任何一个值小于0就输出当前是第几个操作 这道题其实是没有什么难度的,是 ...
- B 外地比赛
时间限制 : - MS 空间限制 : - KB 评测说明 : 1s,256m 问题描述 何老板带着信竞队的k个同学出去外地打比赛.到达目的地后,何老板就找了一家酒店,准备住下.酒店工作人员告诉何 ...