<!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的更多相关文章

  1. express搭建简易web的服务器

    express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...

  2. [转帖]2019 简易Web开发指南

    2019 简易Web开发指南     2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...

  3. 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

    Web GIS系列: 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 使用GeoServer+QGIS发布WMTS服务 使用GeoSe ...

  4. Python 简易web日志查看工具&可改装为命令行工具

    Python 简易web日志查看工具&可改装为命令行工具 效果图 原理 利用python的paramiko库模拟ssh登录操作,并执行tail命令 所需库 flask.paramiko.gev ...

  5. 手动搭建简易web框架与django框架简介

    目录 纯手写简易web框架 基于wsgiref模块 动静态网页 简单了解jinja2模块 框架请求流程 python主流web框架 django框架 简介 应用app 命令操作django pycha ...

  6. [js高手之路]node js系列课程-创建简易web服务器与文件读写

    web服务器至少有以下几个特点: 1.24小时不停止的工作,也就是说这个进程要常驻在内存中 2.24小时在某一端口监听,如: http://localhost:8080, www服务器默认端口80 3 ...

  7. 搭建简易的WebServer(基于pyhton实现简易Web框架 使用socket套接字)

    1. 使用web底层socket的方式实现简易服务器的搭建,用来理解学习 # 1.导入socket模块 import socket import re import gevent import sys ...

  8. 手写简易WEB服务器

    今天我们来写一个类似于Tomcat的简易服务器.可供大家深入理解一下tomcat的工作原理,本文仅供新手参考,请各位大神指正!首先我们要准备的知识是: Socket编程 HTML HTTP协议 服务器 ...

  9. Django-手撸简易web框架-实现动态网页-wsgiref初识-jinja2初识-python主流web框架对比-00

    目录 自己动手实现一个简易版本的web框架 手撸一个web服务端 根据请求 url 做不同的响应处理 基于wsgiref模块实现服务端 用wsgiref 模块的做的两件事 拆分服务端代码 支持新的请求 ...

  10. 自己实现一个简易web服务器

    一个web服务器是网络应用中最基础的环节. 构建需要理解三个内容: 1.http协议 2.socket类 3.服务端实现原理 1.1 HTTP http请求 一般一个http请求包括以下三个部分: 1 ...

随机推荐

  1. linux内核分析第3章&第18章读书笔记

    linux内核分析第3章&第18章读书笔记 第三章 进程管理 进程:处于执行期的程序(目标码存放在某种存储介质上) 包含资源:可执行程序代码,打开的文件,挂起的信号,内核内部数据,处理器状态, ...

  2. NOIP2017 Day2 T2 宝藏(状压DP)

    $O(n*3^n)$好难想...还有好多没见过的操作 令$f[i][j]$表示最深深度为i,点的状态为j的最小代价,每次枚举状态$S$后,计算$S$的补集里的每个点与S里的点的最小连边代价,再$O(3 ...

  3. 解题:POI 2016 Nim z utrudnieniem

    题面 出现了,神仙题! 了解一点博弈论的话可以很容易转化题面:问$B$有多少种取(diu)石子的方式使得取后剩余石子异或值为零且取出的石子堆数是$d$的倍数 首先有个暴力做法:$dp[i][j][k] ...

  4. 【agc004C】AND Grid

    Portal --> agc004C Description 给你一个\(n*m\)的网格图\(A\),有一些格子是'#',现在要构造出两个新的网格图\(B\)和\(C\)满足: 1.如果\(A ...

  5. Spring Swagger URL传参问题(转)

    代码例子: @ApiOperation(value="获取用户详细信息", notes="根据url的id来获取用户详细信息") @ApiImplicitPar ...

  6. chrome插件控制台

    在manifest.json中添加下面的几行 "background": { "scripts": ["background.js"] }, ...

  7. TCP ------ 抓包分析(seq ack)

    总结: 1.ACK包可以和其他包合在一起,比如ACK包可以携带数据 2.可以接收多个数据包后,一次性给一个应答,不用每个数据包一一对应给应答 3.在通信过程中,通过接收到的包的ack值可以判断是否是上 ...

  8. 深度学习voc数据集图片resize

    本人新写的3个pyhton脚本. (1)单张图片的resize: # coding = utf-8 import Image def convert(width,height): im = Image ...

  9. C++ string的那些坑

    1. size_type find_first_of( const basic_string &str, size_type index = 0 ); 查找在字符串中第一个与str中的某个字符 ...

  10. RabbitMQ的原理和使用

    转载:RabbitMQ从入门到精通 转载:轻松搞定RabbitMQ 转载:RabbitMQ Java入门教程 一.RabbitMQ AMQP,即Advanced Message Queuing Pro ...