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 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
amaze ui 的使用详细教程
Aug 19 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实现的RSS生成类实例
2015/04/23 PHP
yii数据库的查询方法
2015/12/28 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
网页javascript精华代码集
2007/01/24 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
javascript常用函数(1)
2015/11/04 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python函数调用追踪实现代码
2020/11/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
2015大学生自我评价范文
2015/03/03 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python