类似猎豹浏览器安装时的用户须知效果。

html文件代码，保存为html文件打开：

 <!DOCTYPE html>

 <html>

  <head>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <title>fold paper effect by gt-柯乐义</title>

   <style>

 #wrapper {

  -webkit-perspective: 55cm;

  -webkit-perspective-origin: 50% 50%;

  text-align: center;

 }

 .paper {

  position: relative;

  height: 40px;

  width: 5em;

  margin: 0;

  background-color: aqua;

  -webkit-transition: -webkit-transform 1s linear;

 }

 </style>

   <script type="text/javascript">

  window.angel = 0;

  window.timer;

  function fold() {

   var foldUp = document.getElementById("foldUp");

   var foldDown = document.getElementById("foldDown");

   var down = document.getElementById("down");

   if (window.angel == 0) {

    window.timer = setInterval(function() {

     var diff = different(-1, 20);

     console.log(foldUp.offsetTop)

     move(foldUp, diff, 1);

     move(foldDown, diff, 3);

     move(down, diff, 4);

    }, 40);

    setTimeout(function() {

     clearInterval(window.timer);

     foldUp.style.top = "-20px";

     foldDown.style.top = "-60px";

     down.style.top = "-80px";

     window.angel = -90;

    }, 1030);

    foldUp.style.webkitTransform = "rotateX(-90deg)";

    foldDown.style.webkitTransform = "rotateX(90deg)";

   } else if (angel == -90) {

    window.timer = setInterval(function() {

     var diff = different(1, 20);

     console.log(foldUp.offsetTop)

     move(foldUp, diff, 1);

     move(foldDown, diff, 3);

     move(down, diff, 4);

    }, 40);

    setTimeout(function() {

     clearInterval(window.timer);

     foldUp.style.top = "0";

     foldDown.style.top = "0";

     down.style.top = "0";

     window.angel = 0;

    }, 1030);

    foldUp.style.webkitTransform = "rotateX(0deg)";

    foldDown.style.webkitTransform = "rotateX(0deg)";

   } else {

    console.log(window.angel)

   }

  }

  function positionValue(div, type) {// 得到css带单位的值

   var str = div.style[type];

   str = str.substring(0, str.length - 2);

   var value = parseInt(str);

   if (isNaN(value)) {

    value = 0;

   }

   return value;

  }

  function move(div, different, time) {

   var top = positionValue(div, "top");

   div.style.top = top + different * time + "px";

  }

  function different(direction, height) {

   var lastAngel = window.angel;

   window.angel += 3.6 * direction;

   var different = Math

     .ceil((Math.cos(window.angel / 180 * Math.PI) - Math

       .cos(lastAngel / 180 * Math.PI))

       * height * 100) / 100;

   return different;

  }

 </script>

  </head>

  <body>

   <div id="wrapper">

    <div id="up" class="paper">

     g

    </div>

    <div id="foldUp" class="paper">

     n

    </div>

    <div id="foldDown" class="paper">

     b

    </div>

    <div id="down" class="paper">

     t

    </div>

   </div>

   <button onclick=fold();>

    fold

   </button>

  </body>

 </html>

http://www.cnblogs.com/roucheng/

html5菜单折纸效果的更多相关文章

  1. HTML5 模拟现实物理效果，感受 Web 技术魅力

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

  2. HTML5大数据可视化效果（二）可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  3. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  4. HTML5实现刮奖效果

    原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...

  5. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

  6. 哇塞！HTML5 实现的雨滴效果 CSS发抖

    http://dreamsky.github.io/main/blog/rainy-day/ Rainy Day – 哇塞! HTML5 实现的雨滴效果 http://www.webhek.com/m ...

  7. html5实现烟花绽放效果

    来源地址:http://codepen.io/whqet/pen/Auzch 1.HTML5 你懂的,先看效果: 2.Html代码 <!-- setup our canvas element - ...

  8. HTML5 3D翻书效果(双面效应)

    最后使用HTML5翻书效果达到测试,比较简单,它的升级版是 最后一个问题: 1)后,原来的页面连环画将成为一面镜子 2)无法实现双面翻书. 3)明显感觉页面似有近遮挡标志. 这次的升级版本号实现过程比 ...

  9. HTML5 模拟现实物理效果

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

随机推荐

  1. MapReduce的一点理解

    对于MapReduce编程,大概率的流程用过的人或多或少都清楚,但是归结到细节上,就有的地方不清楚了,下面根据自己的疑问,加上从网上各处,找到的被人的描述,最自己的疑问做出回答. 1. MapRedu ...

  2. 一个winform带你玩转rabbitMQ

    源码已放出 https://github.com/dubing/MaoyaRabbit 本章分3部分 一.安装部署初探 二.进阶 三.api相关 安装 部署 初探 先上图 一. 安装部署 下载 rab ...

  3. iOS CoreData技术学习资源汇总

    一.CoreData学习指引 1. 苹果官方:Core Data Programming Guide 什么是CoreData? 创建托管对象模型 初始化Core Data堆栈 提取对象 创建和修改自定 ...

  4. linux 笔试题

    一．填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 i节点 来 ...

  5. U-boot.lds文件分析

    OUTPUT_FORMAT("elf32-littlearm", "elf32-littlearm", "elf32-littlearm") ...

  6. Android之 -WebView实现离线缓存阅读

    前言 本篇博客要实现的是一个离线下载和离线阅读的功能,这是很多阅读类app都常见的一个功能,典型的应用就是网易新闻.什么是离线下载?其实这个概念是比较模糊,是离线之后下载呢,还是下载之后离线,但稍微有 ...

  7. 一段时间没上来了，看到有很多网友对OWA感兴趣，因为所在公司发展方向的原因，没有太多时间继续深入研究OWA，敬请见谅

    一段时间没上来了,看到有很多网友对OWA感兴趣,因为所在公司发展方向的原因,没有太多时间继续深入研究OWA,敬请见谅

  8. Windows Store 开发总结——文件操作

    1.读取Isolated Storage 每个Metro程序都有三个文件夹:Local,Roaming,Temp.每个文件夹的访问方法都是相同的. Local用于将数据存储在本地,这是程序特定的文件夹 ...

  9. WPF中如何用代码触发按钮Click处理

    btnOk.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));

  10. 重写 Ext.toolbar.Paging 扩展功能

    直接代码,放项目overrides文件夹中即可 //重写类 分页插件 //汉化 //默认下方布局 //默认显示额外信息 //当删除数据时,处理页面变化 Ext.define("overrid ...