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

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. java生成解析xml的另外两种方法JAXB

     JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实例文档反 ...

  2. [原]quick2.25让描边闪起来

    本文教大家如何使用shader让描边动起来.实质就是间隔一定时间改变描边的颜色.难点:如何通过程序把颜色传给shader.想在quick2.25里面尝试的朋友,参考quick2.25精灵变灰配置一下环 ...

  3. Linux和UNIX监控

    Linux和UNIX上的数据库监控工具包括监控CPU.内存.磁盘.网络.安全性和用户的监控工具.下面罗列了我们找到的有用工具及其简单描述. ps           显示系统上运行的进程列表 top ...

  4. Linux下php5.3编译oracle客户端

    因项目需要在linux下进行php5.3的oracle客户端编译,简要介绍一下步骤及走过的弯路. 1.下载Oracle客户端程序包,其中包含OCI.OCCI和JDBC-OCI等相关文件. 1.1下载文 ...

  5. PHP vs Python

    最近在搞微信公众号方面的开发,发现很多开发微信公众号都使用PHP来开发,由于我之前开发Web端喜欢使用Python,所以从Quora网站找出一篇Which-is-better-PHP-or-Pytho ...

  6. Asp.net Request方法获取客户端的信息

    Response.Write("客户端计算机名:" + Request.UserHostName + "<BR />"); Response.Wri ...

  7. Android之输入框光标和Hint的位置

    如图所示,要实现这一的需求,一般人的布局方式就是左边一button,右边一button,中间一个EditText,为了输入框的响应触摸范围更大往往不会把宽度设置为wrap_content,要么设置成m ...

  8. [引用]SQLServer占CPU100%

    程序猿是如何解决SQLServer占CPU100%的   文章目录 遇到的问题 使用SQLServer Profiler监控数据库 SQL1:查找最新的30条告警事件 SQL2:获取当前的总报警记录数 ...

  9. MyBatis 入门

    什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集.MyBatis ...

  10. 编写高质量JS代码的68个有效方法（三）

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...