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

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. 每日英语：Mistrust Between U.S., Malaysia Strains Probe

    Mistrust between U.S. and Malaysian air-accident investigators has hampered a multinational probe in ...

  2. 题目：打印出所有的 "水仙花数 "，所谓 "水仙花数 "是指一个三位数，其各位数字立方和等于该数本身。例如：153是一个 "水仙花 数 "，因为153=1的三次方＋5的三次方＋3的三次方。

    题目:打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个 "水仙花 数 ", ...

  3. Selenium实战脚本集(4)－－简单的开发者头条客户端

    描述 去开发者头条抓取本日的top 10内容,也就是排在前面的10个,需要抓取标题和url 将这些内容保存在数据库,推荐使用sqlite 写个简单的客户端,要求可以展示每日的内容,点击标题后可以打开浏 ...

  4. Unity3D]引擎崩溃、异常、警告、BUG与提示总结及解决方法

    此贴会持续更新,都是项目中常会遇到的问题,总结成贴,提醒自己和方便日后检查,也能帮到有需要的同学. 若各位有啥好BUG好异常好警告好崩溃可以分享的话,请多多指教.xuzhiping7#qq.com. ...

  5. 在spring,mybatis整合配置中走的弯路（1）

    在接触一个新东西,总免不了走一些弯路,也正是在这些弯路中,我们不断的成长. 从git上把之前写的代码扒下来,看看我在当初使用spring与mybatis中所走的弯路,路过的君子也可引以为戒. < ...

  6. Android使用BLE(低功耗蓝牙，Bluetooth Low Energy)

    背景 在学习BLE的过程中,积累了一些心得的DEMO,放到Github,形成本文.感兴趣的同学可以下载到源代码. github: https://github.com/vir56k/bluetooth ...

  7. [论文笔记] Methodologies for Data Quality Assessment and Improvement (ACM Comput.Surv, 2009) (1)

    Carlo Batini, Cinzia Cappiello, Chiara Francalanci, and Andrea Maurino. 2009. Methodologies for data ...

  8. 使用Aspose.Cells 设置chart的y坐标轴显示值

    目的:设置chart的y坐标轴显示值 用aspose.cell生成的chart生成的Y轴是默认生成的,自己要定义y轴坐标值1.把数据源写到excel里面,list里面2.y轴坐标自己定义 第一种:默认 ...

  9. cwRsync window下的跨服务器的文件同步

    cwRsync 是window下的文件同步软件,可以跨服务器运行,第一次运行的时候是全部备份同步,之后的同步采用的是增量同步 这个软件分为服务端和客户端. 服务器是需要同步的文件源, 客户端相当于是备 ...

  10. 将PDM文件导出成CHM帮助文件

    实际开发中常常将维护数据库字段用 powerdesigner 维护起来,而实际要查阅 数据库用了什么字段是,常常又不方便去打开PDM 文件去找. 下面分享一个小工具,效果看下图: 有这个小工具, PD ...