<!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. poj3783 Balls

    Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1110   Accepted: 721 Description ...

  2. for程序员：这些你可能遇到的职场难题，我们帮你整理好了答案

    “迷茫”是当下青年谈论的最多的词汇之一,无论高矮胖瘦富穷美丑,每个人都有自己独特的难题.造成“迷茫”的原因有很多种,比如生存压力,情感问题,以及困扰着相当一部分人的职场焦虑.今天这篇关于“职场迷茫”的 ...

  3. mobiscroll 案例git

    https://github.com/zhoushengmufc/iosselect

  4. Bash to check SSL cert expired

    Code like this, You can send out a email to notice $ cat urls.txt www.baidu.com $ cat cert_chk.sh #! ...

  5. [DeeplearningAI笔记]序列模型1.3-1.4循环神经网络原理与反向传播公式

    5.1循环序列模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.3循环神经网络模型 为什么不使用标准的神经网络 假如将九个单词组成的序列作为输入,通过普通的神经网网络输出输出序列, 在 ...

  6. JS函数大全 莫名其妙找到的

    1 .document.write(""); 输出语句 2 .JS中的注释为// 3 .传统的HTML文档顺序是:document->html->(head,body) ...

  7. Linux上怎么快速删除一个目录

    删除文件需要用到rm命令,但删除目录需要添加两个参数: -r  向下递归,不管多少级目录都删除 -f  强行删除,不做提示 #rm -rf 文件目录名

  8. Python学习笔记（补充）Split 用法

    >>> u = "www.doiido.com.cn" #使用默认分隔符 >>> print u.split() ['www.doiido.co ...

  9. codeblocks快捷键（转）

    ==日常编辑== • 按住Ctrl滚滚轮,代码的字体会随你心意变大变小.• 在编辑区按住右键可拖动代码,省去拉(尤其是横向)滚动条之麻烦:相关设置:Mouse Drag Scrolling.• Ctr ...

  10. ASP.NET网站伪静态下使用中文URL

    首先解释一下,什么是中文URL呢?它并不是我们常见的把汉字编码为 %CF%EC 这种形式,而是在URL中直接使用汉字 这种形式目前还不是很多见.因为不同的浏览器处理起来可能会有所不同,不过据我测试,I ...