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 object-fit属性
Jul 27 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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根据两点间的经纬度计算距离
2014/10/31 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php跨服务器访问方法小结
2015/05/12 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
python如何通过twisted实现数据库异步插入
2018/03/20 Python
tensorflow如何批量读取图片
2019/08/29 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
爱国主义演讲稿
2014/05/07 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
阿里云日志过滤器配置日志服务
2022/04/09 Servers
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS