教程集 > 脚本编程 > javascript > 正文 js实现的翻页效果

js实现的翻页效果

发布时间：2023-06-28 编辑：jiaochengji.com

教程集为您提供js实现的翻页效果等资源，欢迎您收藏本站，我们将为您提供最新的js实现的翻页效果资源

提示：您可以先修改部分代码再运行

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <style type="text/css">  body{  	background-color:#333;  }  .div{  	position:absolute;  	left:0px;  	top:0px;  	width:350px;  	height:400px;  	border:0px #AAA solid;  	background-color:#666699;  	color:#FF0000;  	filter: progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod="auto expand");  	font-size:16px;  	text-align:left;  	line-height:20px;  	padding:10px;  	overflow:hidden;  	font-size:12px;  	font-family:宋体;  }  .box{  	position:absolute;  	left:50px;  	top:20px;  	width:688px;  	height:482px;  	border:0px #FFF solid;  	padding:0px;  	overflow:hidden;  	visibility:hidden;  }  .pagebox{  	position:absolute;  	left:0px;  	top:0px;  	width:350px;  	height:400px;  	overflow:hidden;  	border:0px #FFF solid;  	filter: progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod="auto expand");  }  #page2{  	background-image:url("9.jpg");  }  </style>  <script type="text/javascript" language="javascript">  var div=null;  var line=null;  var qap=0;  var timerid=0;  var w,h,s;  var step=5;  var pages,boxs,box,boxframe,box3,page3;  var page=0;  function config()  {  	pages=document.getElementsByName("page");  	boxs=document.getElementsByName("box");  	box=document.getElementById("box0");  	boxframe=document.getElementById("boxframe");  	boxframe.style.borderWidth=0;    	w=parseInt(box.currentStyle.width)/2;  	h=parseInt(box.currentStyle.height);  	s=Math.sqrt(w*w h*h);  	  	for(var i=0;i<4;i  ){  		boxs[i].style.width=s;  		boxs[i].style.height=s;  		pages[i].style.width=w-2;  		pages[i].style.height=h-2;  		boxs[i].style.top=s-h 1;  		if(i>0){  			boxs[i].style.left=w;  			boxs[i].style.zIndex=i;  		}else{  			boxs[i].style.left=1;  			boxs[i].style.zIndex=i;  		}  	}  	pages[0].style.backgroundImage="url('http://afei.name/1.jpg')";  	pages[1].style.backgroundImage="url('http://afei.name/2.jpg')";  	pages[2].style.backgroundImage="url('http://afei.name/3.jpg')";  	pages[3].style.backgroundImage="url('http://afei.name/4.jpg')";  	box.style.borderWidth=0;  	box.style.height=s;  	boxframe.style.zIndex=0;  	boxframe.style.left=0;  	boxframe.style.top=s-h;  	boxframe.style.width=w*2;  	boxframe.style.height=h;    	box3=boxs[2];  	page3=pages[2];  	box3.style.zIndex=5;  	qap=0;  	w=w-2;  	h=h-2;  	changeqa();  	box.style.visibility="visible";  	boxframe.style.visibility="visible";  }  function fanye()  {  	qap=0;  	step=3;    	if(timerid>0)  		window.clearInterval(timerid);  	if(page>0){  		  	}  	timerid=window.setInterval(changeqa,1);  	page  ;  }  function changeqa()  {  	if(qap>90){  		qap=90;  		window.clearInterval(timerid);  	}    	var qa=Math.PI*qap/180;  	var mcs=Math.cos(qa);  	var mss=Math.sin(qa);  	with(box3.filters.item(0)){  		M11=mcs;  		M12=mss;  		M21=-mss;  		M22=mcs;  	}  	box3.style.top=h-s*mss-s*mcs (s-h)-1;  	box3.style.left=-s*mss w 1;    	with(boxs[3].filters.item(0)){  		M11=mcs;  		M12=mss;  		M21=-mss;  		M22=mcs;  	}  	boxs[3].style.top=h-s*mss (s-h)-1;  	    	page3.style.left=0;  	page3.style.top=s-w*mss;    	with(pages[3].filters.item(0)){  		M11=mcs;  		M12=-mss;  		M21=mss;  		M22=mcs;  	}  	var weitiao=0;  	if(qap==5||(qap>=15&&qap<25)||qap==40||qap==45||qap==50||qap==65||qap==60){  		weitiao=1;  	}else if(qap==35||qap==25||qap==70){  		weitiao=2;  	}else if(qap==80){  		weitiao=4;  	}  	pages[3].style.top=-h*mcs weitiao;      	qa=Math.PI*180/180 qa;  	mcs=Math.cos(qa);  	mss=Math.sin(qa);  	with(page3.filters.item(0)){  		M11=mcs;  		M12=mss;  		M21=-mss;  		M22=mcs;  	}  	    	  	qap =step;  	if(step<3)  		step =1;  }  window.attachEvent("onload",config);  </script>  </head>    <body>  <input type="button" onclick="fanye();" value="翻页">  <div id="box0" class="box">  <div id="box" class="pagebox"><div id="page" class="div">page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容</div></div>  <div id="box" class="pagebox"><div id="page" class="div">page2第二页page2第二页page2第二页page2第二页page2第二页page2第二页page2第二页</div></div>  <div id="box" class="pagebox"><div id="page" class="div">page3阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们</div></div>  <div id="box" class="pagebox"><div id="page" class="div">page4阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们</div></div>  <div id="boxframe" class="box"></div>  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js实现图片上显示左右箭头类似翻页效果的代码
 在canvas上实现元素图片镜像翻转动画效果的方法
 页面内容翻页效果 Flippage
javascript标签页翻动效果(实例分享)(图文)
jQuery卡片翻转效果插件 Flip!
书本翻页效果 Turn.js
JQuery学习笔记实现图片翻转效果和TAB标签切换效果第1/2页
 js div实现下一页翻页效果
 jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
 js实现网页标题闪烁效果

上一篇：各种类型的托拽，效果

[关闭]

最近更新

浏览排行

~ ~