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

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. 文件编辑器 vi

    1.关于文本编辑器: 文本编辑器有很多,比如图形模式的gedit.kwrite.OpenOffice ... ... ,文本模式下的编辑器有vi.vim(vi的增强版本)和nano ... ... v ...

  2. Ecshop商品详情页显示当前会员等级价格

    会员登录状态下,在ECSHOP商品详情页的本店售价中显示当前登录会员对应的等级价格,在未登录状态下,则还默认显示原来的本店售价. 解决方法: 这个需要修改ECSHOP程序代码来实现. 打开文件 /in ...

  3. ecshop登陆后价格可见,会员注册登陆才能显示价格

    打开模版文件夹里面的goods.dwt 查找{$lang.shop_price}<font class="price" id="ECS_SHOPPRICE" ...

  4. 301 redirect Domain Name using global.asax

    void Application_BeginRequest(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.ToSt ...

  5. Android TabActivity中onKeyDown无效问题

    @Override     public boolean onKeyDown(int keyCode, KeyEvent event)     {                  //按下键盘上返回 ...

  6. TWaver Flex开发示例及license下载

    做电信项目的朋友一定知道TWaver,而Flex版具有很好的跨平台性,很适合做B/S模式的应用. Flex版的在线DEMO:http://twaver.servasoft.com/demo/twave ...

  7. 在android studio中导入github下载的工程

    1.从Github中下载工程压缩包,并将其解压到本地 2.修改文件 假设,解压后的文件目录如下: (1)修改配置文件  xx\build.gradle // Top-level build file ...

  8. UIRefreshControl的使用

    注意: 1.需要在ios6.0之后的版本中使用 2.UIRefreshControl目前只能用于UITableViewController,如果用在其他ViewController中,运行时会错误(即 ...

  9. SASS用法指南-转

    作者: 阮一峰  日期: 2012年6月19日  原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html 艹,没想到sass 2012年就有了.现在 ...

  10. dWebBrowser常用知识点

    1.webbrowser调用的就是本机IE,并且webbrowser默认就是运行在IE7 mode下,除非你改变它. 2.不装IE,无法用webbrowser. 3.设置WebBrowser在IE9 ...