<!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. 部署OpenStack问题汇总（一）--使用packstack安装openstack：源问题的处理

    在安装的过程中,遇到了源的问题,找不到包的网页:    重新打开 预装源地址,打开epel-openstack-havana.repo 文件,显示如下: # Place this file in yo ...

  2. C# 未能加载文件或程序集“mysql.data”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)

    报错信息: 在web.config中已经加了以下代码. <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-co ...

  3. 在pycharm中运行nose测试框架

    之前一直在pydev上或命令行上运行nosetests. pycharm上如果运行nosetests,在看了管网后,总结果如下: 全新的pycharm: 填加完成后,打开你要的脚本,运行,即可以以no ...

  4. PHP将富文本内容去除各类样式图片等只保留txt文本内容（作用于SEO的description）

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  5. WF的简单使用

    WWF(Windows Workflow Foundation):是微软提供的工作流技术,工作流就是对工作流程的规范和抽象.主要有三个部分Activity(活动).Runtime(工作流运行时)和To ...

  6. ELKStack

    ELKStack简介        对于日志来说,最常见的需求就是收集.存储.查询.展示,开源社区正好有相对应的开源项目:logstash(收集).elasticsearch(存储+搜索).kiban ...

  7. POJ3268 Silver Cow Party【最短路】

    One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to attend the big co ...

  8. ubuntu怎么安装下载工具uget+aria2 for firefox

    Windows下的下载工具--迅雷,之所以下载速度快,乃是它能搜索资源.为己所用,而不是仅仅从原始地址这单一资源处下载. Ubuntu下也有类似的工具,那就是aira2. aira2是一个命令行下载工 ...

  9. POJ 2240 - Arbitrage - [bellman-ford求最短路]

    Time Limit: 1000MS Memory Limit: 65536K Description Arbitrage is the use of discrepancies in currenc ...

  10. python读取文件行号和内容的便捷方法

    处理数据时候,需要得到数据所在和行号,使用enumerate时便捷的方法: file = open('file.txt','r') for (num,value) in enumerate(file) ...