原生js与css3实现简单翻页动画

最新推荐文章于 2024-06-30 15:38:14 发布

我是你牛爷爷啊

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量814

点赞数 1

文章标签：服务器前端 http

本文链接：https://blog.csdn.net/weixin_54000091/article/details/123333969

版权

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		body{
			 transform-style: preserve-3d;
				position: relative;
		}
		.page{
			width: 300px;
			height: 550px;
			border: 1px solid aquamarine;
			text-align: center;
			line-height: 550px;
			font-size: 16px;
			transition: 0.6s;
			transform-origin: left;
			transform: rotateY(0deg);
			position: absolute;
			top: calc(50vh - 260px);
			left: calc(50vw - 150px);
			/* background-color: coral; */
			
		}
		</style>
	</head>
	<body>
		
		<div class="page">
			page1
		</div>
		<div class="page">
			page2
		</div>
		<div class="page">
			page3
		</div>
		<div class="page">
			page4
		</div>
		<div class="page">
			page5
		</div>
		
		
		<script type="text/javascript">
			var pages =document.getElementsByClassName('page')
				var zIndexList=[]
				var zIndexList2=[]
				var index=1
				for (let page of pages){
					zIndexList.push(index)
					index++
					page.addEventListener('click',function(){
						
						var isfy=false
						return (e)=>{
							page.style.zIndex=zIndexList[0] //设置zindex翻页得时候 按顺序翻页
							console.log(page.style.zIndex)
							zIndexList.splice(0,1)
							if(zIndexList.length==0){
								zIndexList=[...zIndexList2]								
							}
							if(isfy){
								page.style.transform='rotateY(0deg)'
								isfy=false
								
							}else{
								page.style.transform='rotateY(180deg)'
								isfy=true
							}
						}
					}())
				}
				zIndexList2=[...zIndexList]
		</script>
	</body>
</html>