您的位置：首页 > Web前端 > CSS

#学习笔记#(44)日历翻页效果CSS3+JS

2016-02-24 00:39 791 查看

html代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>日历翻页效果</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="mySpace">
<div class="container" id="months">
<div class="page" id="page1">1月</div>
<div class="page" id="page2">2月</div>
<div class="page" id="page3">3月</div>
<div class="page" id="page4">4月</div>
<div class="page" id="page5">5月</div>
<div class="page" id="page6">6月</div>
<div class="page" id="page7">7月</div>
<div class="page" id="page8">8月</div>
<div class="page" id="page9">9月</div>
<div class="page" id="page10">10月</div>
<div class="page" id="page11">11月</div>
<div class="page" id="page12">12月</div>
</div>
</div>
<div class="btn">
<button id="prev" onclick="prev();">上个月</button>
<button id="next" onclick="next();">下个月</button>
</div>
<script src="calendar.js"></script>
</body>
</html>

js代码如下

//获得所有的月份
//var oMonth=document.getElementById("months").children;
var current=1;//设置当前的月份为1
document.getElementById("page"+current).style.cssText="transform:rotateX(0deg);transform-origin:100% 100%;transition:1s all;opacity:1;";
//下个月翻页
function next(){
if(current==12)
return;
document.getElementById("page"+current).style.cssText="transform:rotateX(-90deg);transform-origin:100% 100%;transition:1s all;opacity:0;";
current++;
document.getElementById("page"+current).style.cssText="transform:rotateX(0deg);transform-origin:100% 100%;transition:1s all;opacity:1;";
}
//上个月翻页
function prev(){
if(current==1)
return;
document.getElementById("page"+current).style.cssText="transform:rotateX(90deg);transform-origin:100% 100%;transition:1s all;opacity:0;";
current--;
document.getElementById("page"+current).style.cssText="transform:rotateX(0deg);transform-origin:100% 100%;transition:1s all;opacity:1;";
}

CSS代码如下

.mySpace{
-webkit-perspective:1000;
perspective:1000;
-webkitperspective-origin:50%;
perspective-origin:50%;
width:400px;
height:600px;
overflow:hidden;
margin:0px auto;
}
.container{
transform-style:preserved-3d;
width:400px;
height:400px;
margin:100px auto 0px auto;
}
.page{
width:400px;
height:400px;
background-color:green;
color:#fff;
font-size:150px;
text-align:center;
line-height:400px;
position:absolute;
-webkit-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg);
-o-transform:rotateX(-90deg);
transform:rotateX(-90deg);
opacity:0;
}
.btn{
width:140px;
margin:20px auto;
z-index:1000;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航