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

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. Pro ASP.NET MVC –第四章 语言特性精华

    C#语言有很多特性,并不是所有的程序员都了解本书我们将会使用的C#语言特性.因此,在本章,我们将了解一下作为一个好的MVC程序员需要了解C#语言的特性. 每个特性我们都只是简要介绍.如果你想深入了解L ...

  2. iOS开发——程序员必备&iOS安装包的三种格式 deb、ipa 和 pxl的解释和说明

    iOS安装包的三种格式 deb.ipa 和 pxl的解释和说明 目前 iOS 平台上常见的安装包有三种,deb.ipa 和 pxl.转自链接:http://fanlb.blogbus.com/logs ...

  3. iOS：基于AVPlayer实现的视频播放器

    最近在学习AVFoundation框架的相关知识,写了一个基于AVPlayer的视频播放器,相关功能如下图: 代码github:https://github.com/wzpziyi1/VideoPla ...

  4. u3d动态加入模型

    楼层一层一层的加,把模型分开,弄成prefab放到Resourse文件夹里,在代码里用Instantiate(Resources.Load("模型名字") as GameObjec ...

  5. 日本超人气洛比（Robi）声控机器人

    1.日本超人气洛比(Robi)声控机器人. http://technews.cn/2015/04/18/interview-with-robi-creator-tomotaka-takahashi/ ...

  6. C primer plus 练习题 第一章

    1. #include <stdio.h> int main() { //将英寸转换为厘米 1英寸=2.54厘米 int inch; printf("请输入英寸:"); ...

  7. 批量Ping IP

    刚刚接触Python 想做点什么 听说Python 在网络方便很厉害 后来总结如下: 第一:发现公司都固定IP 每次新来同事都要猜一个没有人用的IP  很费劲 第二:我们公司有的IP可以上QQ 有的不 ...

  8. 公网IP、私网IP

    公网.内网是两种Internet的接入方式.公网接入方式:上网的计算机得到的IP地址是Internet上的非保留地址,公网的计算机和Internet上的其他计算机可随意互相访问. NAT(Networ ...

  9. linux_脚本应用

    linux下三个有用的 Python 脚本 2010年4月29日   import os, sys  def pyc_clean(dir):      findcmd = 'find %s -name ...

  10. [转]Visual Studio技巧之打造拥有自己标识的代码模板

    可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便.在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的 ...