<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         *{

             margin:0;

             padding:0;

         }

         #box{

             width:100px;

             height:400px;

             margin:0 auto;

             background: rosybrown;

             position: relative;

         }

         #boxchild{

             width:100px;

             height:100px;

             line-height: 100px;

             background: red;

             text-align: center;

             position: absolute;

             top:300px;

         }

         p{

             width:100px;

             height:100px;

             display: flex;

             flex-direction: column;

             justify-content: space-around;

             align-items: center;

         }

         span{

             width:20px;

             height:20px;

             cursor: pointer;

             line-height: 20px;

             text-align: center;

             background: yellow;

             border-radius: 50%;

         }

     </style>

 </head>

 <body>

 <div id="box">

     <div id="boxchild">

         <p>

         <span onclick="change()">1</span>

         <span onclick="change()">2</span>

         <span onclick="change()">3</span>

         <span onclick="change()">4</span>

         </p>

     </div>

 </div>

 <script type="text/javascript">

         var spanNode = document.getElementsByTagName("span");

         var divNode = document.getElementById("boxchild");

         for (var i = 0; i < spanNode.length; i++) {

             spanNode[i].onclick = function () {

                 var index = this.innerText;

                 change(index);

             }

         }

         function change(index) {

             var t = 300-(index-1)*100;

             divNode.style.top= t + "px";

         }

 </script>

 </body>

 </html>

应该是可以做成立体的

js模拟电梯操作的更多相关文章

  1. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  2. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  3. HTML 事件(四) 模拟事件操作

    本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4.  ...

  4. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

  5. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  6. js 模拟java 中 的map

    //js模拟map Map = { obj : {}, put : function(key , value){ this.obj[key] = value; }, get : function(ke ...

  7. 关于js模拟c#的Delegate(委托)实现

    这是我的第一篇博文,想来讲一讲js的函数.我的标题是js模拟c#的Delegate. 一.什么是Delegate(委托) 在jquery中有delegate函数,作用是将某个dom元素的标签的事件委托 ...

  8. 爬虫模块介绍--selenium （浏览器自动化测试工具，模拟可以调用浏览器模拟人操作浏览器）

    selenium主要的用途就是控制浏览器,模仿真人操作浏览器的行为 模块安装:pip3 install selenium 需要控制的浏览器 from selenium import webdriver ...

  9. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

随机推荐

  1. Ubuntu 16.04 LAMP server tutorial with Apache 2.4, PHP 7 and MariaDB (instead of MySQL)

    https://www.howtoforge.com/tutorial/install-apache-with-php-and-mysql-on-ubuntu-16-04-lamp/ This tut ...

  2. mysql语句性能分析案例

    写法不一样而功能完全相同的两条 SQL 的在性能方面的差异.示例一需求:取出某个 group(假设 id 为 100)下的用户编号(id),用户昵称(nick_name).用户性别( sexualit ...

  3. ftp主动与被动模式详解

    FTP是仅基于TCP的服务,不支持UDP.与众不同的是FTP使用2个端口,一个数据端口和一个命令端口(也可叫做控制端口).通常来说这两个端口是21(命令端口)和20(数据端口).但FTP工作方式的不同 ...

  4. 如何在mysql中查询每个分组的前几名

    问题 在工作中常会遇到将数据分组排序的问题,如在考试成绩中,找出每个班级的前五名等.  在orcale等数据库中可以使用partition 语句来解决,但在MySQL中就比较麻烦了.这次翻译的文章就是 ...

  5. [工具] 知网(CNKI)文献下载工具

    https://github.com/amyhaber/cnki-downloader 用于免费搜索,下载CNKI上的各类文献资料

  6. CBV之详解

    一,CBV,基于反射实现根据请求方式不同,执行不同的方法. 1. 开发模式 - 普通开发方式(前后端放在一起写) - 前后端分离 2. 后端开发 为前端提供URL(API/接口的开发) 注:永远返回H ...

  7. php intval的取值范围：与操作系统相关

    php intval的取值范围:与操作系统相关,32位系统上为-2147483648到2147483647,64位系统上为-9223372036854775808到922337203685477580 ...

  8. MongoDB 学习笔记2----条件操作符

    条件操作符:用于两个比较两个表达式并从mongdb中获取文档 mongodb常见的操作符及解析说明 $lt:小于 example:ago<20 $lte:小于等于 example:<=20 ...

  9. PAT甲1077 Kuchiguse【字符串】【暴力】【Hash】【二分】

    1077 Kuchiguse (20 分) The Japanese language is notorious for its sentence ending particles. Personal ...

  10. kafka window环境搭建

    1部署zookeeper ZooKeeper的安装模式分为三种,分别为:单机模式(stand-alone).集群模式和集群伪分布模式. 1.运行环境:ZooKeeper 要求 JAVA 6 以上的环境 ...