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

最新推荐文章于 2022-02-15 09:58:49 发布

游走走

最新推荐文章于 2022-02-15 09:58:49 发布

阅读量3.2k

点赞数

分类专栏：学习笔记 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50727319

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

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" οnclick="prev();">上个月</button>
			<button id="next" οnclick="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;
}