<!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. 解题：POI 2012 Cloakroom

    题面 首先,单独处理每个询问复杂度显然不可承受,还是考虑通过排序使得限制更容易达到:按照$a$将物品排序,按照$m$将询问排序,这样肯定是要不断添加物品才能达到要求,顺着做一遍就行了 然后发现$b$的 ...

  2. [Wf2011]Chips Challenge

    两个条件都不太好处理 每行放置的个数实际很小,枚举最多放x 但还是不好放 考虑所有位置先都放上,然后删除最少使得合法 为了凑所有的位置都考虑到,把它当最大流 但是删除最少,所以最小费用 行列相关,左行 ...

  3. windows 安装 apache 服务以及添加 php 解析

    apache 官方并没有提供 windows 的安装包,但是它们官网给出了第三方的链接,我们可以在那些第三方网站上找到适用于 windows 的二进制包. 我们点进去下载一个 64 位的, 下载完之后 ...

  4. windows下php扩展存在但无法加载的问题

    1.可能存在多个php环境,扩展没有放对地方 2.扩展和php版本不对应,例如,php是32位,扩展是64位:或者php是nts版本,但是扩展不是nts版本.

  5. vmvare安装ubuntu后

    配置源: http://wiki.ubuntu.org.cn/%E6%BA%90%E5%88%97%E8%A1%A8#Trusty.2814.04.29.E7.89.88.E6.9C.AC 清理工作: ...

  6. JSOI2008 小店购物

    https://www.luogu.org/problem/show?pid=2792 题目背景 JSOI集训队的队员发现,在他们经常活动的集训地,有一个小店因为其丰富的经营优惠方案深受附近居民的青睐 ...

  7. POJ 2007 Scrambled Polygon 极角序 水

    LINK 题意:给出一个简单多边形,按极角序输出其坐标. 思路:水题.对任意两点求叉积正负判断相对位置,为0则按长度排序 /** @Date : 2017-07-13 16:46:17 * @File ...

  8. Packet Tracer 5.0 构建CCNA实验（3）—— 路由器实现vlan间通信

    --交换机配置 --交换机和路由器连接的接口 switchport mode trunk --路由器配置 enable conf t int fa0/0.1 --路由器接口的子接口 encapsula ...

  9. Web 开发者不可不知的15条编码原则

    HTML 已经走过了近20的发展历程.从HTML4到XHTML,再到最近十分火热的HTML5,它几乎见证了整个互联网的发展.但是,即便到现在,有很多基础的概念和原则依然需要开发者高度注意.下面,向大家 ...

  10. CSS与HTML结合

    CSS与HTML结合的4中方式: 1.每个HTML标签都有style属性 2.当页面中有多个标签具有相同样式时,可定义style标签封装样式以复用 <style type=”text/css”& ...