html5菜单折纸效果


Posted in HTML / CSS onApril 22, 2014

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

html5菜单折纸效果

点击后效果

html5菜单折纸效果

复制代码
代码如下:

<!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>
HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
使用html5制作loading图的示例
Apr 14 #HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
html5图片上传预览示例分享
Apr 14 #HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 #HTML / CSS
You might like
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Python转码问题的解决方法
2008/10/07 Python
Python中itertools模块用法详解
2014/09/25 Python
基于python 字符编码的理解
2017/09/02 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
为什么说python适合写爬虫
2020/06/11 Python
what is the difference between ext2 and ext3
2015/08/25 面试题
德语专业求职信
2014/03/12 职场文书
合伙协议书
2014/04/23 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
班级团队活动方案
2014/08/14 职场文书
市场部岗位职责
2015/02/12 职场文书
员工辞退通知书
2015/04/17 职场文书
尼克胡哲观后感
2015/06/08 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书