简易web-slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="slide" id="1">1</div>
<div class="slide" id="2">2</div>
<div class="slide" id="3">3</div>
<div class="slide" id="4">4</div>
<div class="slide" id="5">5</div>
<div class="slide" id="6">6</div>
</div>
<script src="./a.js"></script>
</body>
</html>
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
font-size: 50px;
text-align: center;
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation: zoomIn 0.5s;
}
let num = 1;
let total = 6;
function page(num) {
window.location.hash = '#' + num;
document.getElementById(num).classList.toggle('zoomIn');
setTimeout(() => {
document.getElementById(num).classList.toggle('zoomIn');
}, 500);
}
function prev() {
if (num <= 1) {
return
}
num -= 1;
page(num);
}
function next() {
if (num >= total) {
return
}
num += 1;
page(num);
}
window.addEventListener('keydown', (e) => {
// console.log(e);
if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
next();
}
if (e.code === 'ArrowUp' || e.code === 'ArrowLeft') {
prev();
}
});
简易web-slide的更多相关文章
- express搭建简易web的服务器
express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...
- [转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...
- 搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
Web GIS系列: 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 使用GeoServer+QGIS发布WMTS服务 使用GeoSe ...
- Python 简易web日志查看工具&可改装为命令行工具
Python 简易web日志查看工具&可改装为命令行工具 效果图 原理 利用python的paramiko库模拟ssh登录操作,并执行tail命令 所需库 flask.paramiko.gev ...
- 手动搭建简易web框架与django框架简介
目录 纯手写简易web框架 基于wsgiref模块 动静态网页 简单了解jinja2模块 框架请求流程 python主流web框架 django框架 简介 应用app 命令操作django pycha ...
- [js高手之路]node js系列课程-创建简易web服务器与文件读写
web服务器至少有以下几个特点: 1.24小时不停止的工作,也就是说这个进程要常驻在内存中 2.24小时在某一端口监听,如: http://localhost:8080, www服务器默认端口80 3 ...
- 搭建简易的WebServer(基于pyhton实现简易Web框架 使用socket套接字)
1. 使用web底层socket的方式实现简易服务器的搭建,用来理解学习 # 1.导入socket模块 import socket import re import gevent import sys ...
- 手写简易WEB服务器
今天我们来写一个类似于Tomcat的简易服务器.可供大家深入理解一下tomcat的工作原理,本文仅供新手参考,请各位大神指正!首先我们要准备的知识是: Socket编程 HTML HTTP协议 服务器 ...
- Django-手撸简易web框架-实现动态网页-wsgiref初识-jinja2初识-python主流web框架对比-00
目录 自己动手实现一个简易版本的web框架 手撸一个web服务端 根据请求 url 做不同的响应处理 基于wsgiref模块实现服务端 用wsgiref 模块的做的两件事 拆分服务端代码 支持新的请求 ...
- 自己实现一个简易web服务器
一个web服务器是网络应用中最基础的环节. 构建需要理解三个内容: 1.http协议 2.socket类 3.服务端实现原理 1.1 HTTP http请求 一般一个http请求包括以下三个部分: 1 ...
随机推荐
- 洛谷 P2498 [SDOI2012]拯救小云公主 解题报告
P2498 [SDOI2012]拯救小云公主 题目描述 英雄又即将踏上拯救公主的道路-- 这次的拯救目标是--爱和正义的小云公主. 英雄来到\(boss\)的洞穴门口,他一下子就懵了,因为面前不只是一 ...
- 基于 Quartz.NET 实现可中断的任务
基于 Quartz.NET 实现可中断的任务 Quartz.NET 是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET 允许开发 ...
- [转载]js正则表达式语法
1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的 ...
- BNU-2017.7.5排位赛3总结
链接:https://www.bnuoj.com/v3/contest_show.php?cid=9148#info A题 满足条件的只有(1,2,4),(1,2,6),(1,3,6),所以先满足4, ...
- libevent学习文档(三)working with event
Events have similar lifecycles. Once you call a Libevent function to set up an event and associate i ...
- Azure 上SQL Database(PaaS）Time Zone时区问题处理
在Azure上面的PaaS时间都是以UTC时间为准(云的世界里基本上都是以UTC时间为标准的),所以以前在本地SQL Server上面常用的GetDate()方法会碰到问题,在中国获取的时间会被当前时 ...
- python 获取文件md5
def GetFileMd5(filename): if not os.path.isfile(filename): return myhash = hashlib.md5() f = file(fi ...
- JAVA Remote Object
RMI(Remote Method Invocation)远程方法调用是一种计算机之间利用远程对象相互调用实现双方通讯的一种通讯机制.使用这种机制,某一台计算机上的对象可以调用另一台计算机上的对象来获 ...
- 前端PHP入门-033-连接数据库-天龙八步
php检查MySQL的支持是否开启? 若没有看到mysqli扩展在windows服务器下,打开php.ini文件,将php_mysqli.dll打开即可! 注意: 从PHP7开始默认不再支持mysql ...
- 前端PHP入门-015-递归函数-飘过
提要: 如果感觉吃力,web前端的各位同学,可以弃之. 递归函数,递归只是一个名字,而递归函数的规定: 函数体内调用函数自己 . 我们来计算 10!=10*9*8*7*6*5*4*3*2*1 web前 ...