JS实现翻书效果

最新推荐文章于 2024-08-01 13:43:16 发布

Beq

最新推荐文章于 2024-08-01 13:43:16 发布

阅读量6.2k

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/qq_34067556/article/details/81908478

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

布局啥的就不写了，使用绝对定位使得每一张图片出现在同一位置，主要在JS，

JS主要处理浏览器兼容，trasition和transform各个浏览器都有对应的语法，有时候你的思路没错，没效果的原因就是兼容性。

通过Totransform 和 Totrasition给各个图片设置动画特性，rotate实现旋转动画。

JS有部分源码是个人使用的库，没在页面中调用说明没用。

效果图：

https://htmlpreview.github.io/?https://github.com/anymouschina/html5/blob/master/html5/css3%E5%AE%9E%E7%8E%B0%E7%BF%BB%E4%B9%A6%E6%95%88%E6%9E%9C.html

源码：

//html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3翻书</title>
		<style>
			*{padding: 0;margin: 0;}
			body,html {
                height: 100%;
            }
            li{
                list-style: none;
            }
            body {
                -webkit-perspective: 1000px;
                -moz-perspective: 1000px;
                -ms-perspective: 1000px;
                perspective: 1000px;
                background-color: #212121;
            }
 .book{
 	position: absolute;
 	width: 500px;
 	height: 500px;
 	top: 20%;
 	left: 40%;
 -webkit-transform: rotateX(30deg);
 -moz-transform: rotateX(30deg);
 -ms-transform: rotateX(30deg);
 -o-transform: rotateX(30deg);
 transform: rotateX(30deg);
 	
 }
 .page{
 	position: absolute;
 	left: 0;
 	top: 0;
    width: 500px;
    height: 500px;
    text-align: center;
    border: 1px solid red;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
 }
.pre-3d {               
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
                /*保留3D转换*/            }


.front1 {
                background-color: paleturquoise;
            }
            .front2 {
                background-color: goldenrod;
            }


      img{
      	width: 100%;
      	height: 100%;
      }
		</style>
	</head>
	<body>
		<div class="book pre-3d" id="book">
			<!--
            	作者：624144061@qq.com
            	时间：2018-06-16
            	描述：后封面
            -->
			<ul>
				<li class="page"id="Recover"><img src="img/1.jpg"alt=""/></li>
				<!--
                	作者：624144061@qq.com
                	时间：2018-06-16
                	描述：书页
                -->
				<li class="page pre-3d font2 "><img src="img/2.jpg"alt=""/></li>
					<li class="page pre-3d font2 "><img src="img/3.jpg"alt=""/></li>
						<li class="page pre-3d font2 "><img src="img/4.jpg"alt=""/></li>
							<li class="page pre-3d font2 "><img src="img/5.jpg"alt=""/></li>
			<!--
            	作者：624144061@qq.com
            	时间：2018-06-16
            	描述：封面
            -->
            <li class="pre-3d page font1"><img src="img/6.jpg"alt=""/></li>
			</ul>
		</div>
		<script src="js/myjs.js"></script>
		<script>
			window.onload=function(){
		  var b=document.getElementById("book");
		  var s=document.getElementsByTagName("li");
		  var c=document.getElementById("Recover");
		  i=5;
		  var d=-180;
		 	b.addEventListener("click",function(e){
	    		Totransform(s[i],"rotateY("+d+"deg)");
		 	Totransition(s[i],"all 1s");
		 	     d+=5;
		 	     
		 		i--;
		 		if(i<0){
		 			for(var j=0;j<=5;j++){
		 				Totransform(s[j],"rotateY(0deg)");
		 	         Totransition(s[j],"all 1s");
		 	         d-=5;
		 			}
		 			i=5;
		 		}
		 })
	    
	  
	    	
		 	
		 
		 	
		 
		 
		 
		  }
		</script>
</body>
</html>

//myjs.js


//定义全局变量
var XMLHttpRequest,
    keysdown={},
    index,
    speed,x,y
    ;
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
 


var gamebase=function(){
	   addEventListener("keydown",function(e){
	   	keysdown[e.keyCode]=true;
	   	console.log("按键的ASCII:"+e.keyCode);
	   },false);
       addEventListener("keyup",function(e){
       	delete keysdown[e.keyCode];
       },false);
}


function getStyle(obj,attr){

if(obj.currentStyle){return obj.currentStyle[attr];} 
else{

return getComputedStyle(obj,false)[attr];
}
}

 function startMove(obj,json,time,fn){
 	time=time?time:30;
	obj.timer=setInterval(function(){
		var flag=true;
		for(var attr in json){
		//取当前的值
		var icur=0;
		
		if(attr=='opacity'){
			icur=Math.round(parseFloat(getStyle(obj,attr))*100);
		}
		else{
			icur=parseInt(getStyle(obj,attr));//获取当前属性的数据 每次数据不一样
		}
		//速度
		var speed=(json[attr]-icur)/8;
		
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		//检测停止
	
			if(attr=='opacity'){
				obj.style.fliter='opacity:'+icur+speed+'';//火狐浏览器
				obj.style.opacity=(icur+speed)/100; //ie
			}
			else{
				obj.style[attr]=icur+speed+'px';
			}	
		if(icur!=json[attr]){
		flag=false;
		}
	  
	    //console.log(icur+'||'+json[attr]+'||高:'+obj.style.height); debug
		if(flag){
			
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
			}	
		}
	},30)
	
}
function loadXMLDoc(){
	window.XMLHttpRequest?XMLHttpRequest=new XMLHttpRequest:XMLHttpRequest=new ActiveXObject("Microsoft.XMLHttp");
	
}
/*function Ajax(method,url,)
{
	loadXMLDoc();
	XMLHttpRequest.onreadstatechange=function(){
		if(XMLHttpRequest.readyState==4&&XMLHttpRequest.status==200){
			
		}
	}
}*/
//以下是图片变换区
function autoChangeImg(obj,time){
	var len=obj.length;
	time=time?time:1000;
	index=0; 
	   for( var i=0;i<len;i++){
	 obj[i].onmouseout=function(){
	obj.timer=setInterval(
	function(){	
	index++;
	if(index>len||index==len)index=0;
	changeImg(obj,index);
		},time)}  
	   
	   	obj[i].onmouseover=function(){
	   		if(obj.timer)clearInterval(obj.timer);
	   	}
	   } 
	   obj[0].onmouseout();
}
function changeImg(obj,index){
	var len=obj.length;
	for(var i=0;i<len;i++){
		obj[i].style.display='none';
	}
	   obj[index].style.display='block';
}
function mouseMove(event){
	var e = event || window.event;
     console.log(e.clientX);
}
function Totransform(obj,json){
	          obj.style.transform=json;
             obj.style.webkitTransform = json;
            obj.style.MozTransform = json;
            obj.style.msTransform =json;
            obj.style.OTransform = json;
         

}
function Totransition(obj,time){
	
	 obj.style.transition=time;
             obj.style.webkitTransition = time;
            obj.style.MozTransition = time;
            obj.style.msTransition =time;
            obj.style.OTransition = time;
          
}
function Totransorigin(obj,str){
	 obj.style.transformOrigin=str;
             obj.style.webkitTransformOrigin = str;
            obj.style.MozTransformOrigin = str;
            obj.style.msTransformOrigin =str;
            obj.style.MozTransformOrigin = str;
}
function Toperspective(obj,str){
	 obj.style.perspective=str;
             obj.style.webkitperspective = str;
            obj.style.Mozperspective = str;
            obj.style.msperspective =str;
            obj.style.Mozperspective = str;
            
}