<!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. 谷哥的小弟学前端(02)——HTML常用标签（2）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  2. 【bzoj4484】【jsoi2015】最小表示

    Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 432  Solved: 223[Submit][Status][Discuss] Descriptio ...

  3. vue2.0 安装及项目搭建（一）

    基本环境安装 1.安装node:从node.js官网下载并安装node.测试:win+R(打开命令行)-------输入cmd-------敲入node -v.如果出现相应版本号,即安装成功: 2.测 ...

  4. Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2) A B C D 暴力 水 二分 几何

    A. Vicious Keyboard time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. Listener 介绍

    当 web 应用在 web 容器中运行时,web 应用内部会不断地发生各种事件:如 web 应用启动.web 应用停止,用户 session 开始.用户 session 结束.用户请求到达等. 实际上 ...

  6. libevent学习文档(二)eventbase相关接口和参数

    Setting up a default event_base The event_base_new() function allocates and returns a new event base ...

  7. gflag使用

    #include <gflags/gflags.h> #include <iostream> // 声明全局flag DEFINE_bool(my_bool, false, & ...

  8. C++调用函数模仿数字钟表

    调用系统函数,可以得到系统时间 #include<iostream> #include<windows.h> #include<time.h> using name ...

  9. 「Python-Django」django 实现将本地图片存入数据库，并能显示在web上

    1. 将图片存入数据库 关于数据库基本操作的学习,请参见这一篇博客:https://www.cnblogs.com/leejy/p/6745186.html 这里我默认,您已经会了基本操作,能在数据库 ...

  10. (转)C++常见问题: 字符串分割函数 split

    http://www.cnblogs.com/dfcao/p/cpp-FAQ-split.html C++标准库里面没有字符分割函数split ,这可太不方便了,我已经遇到>3次如何对字符串快速 ...