翻书效果，求指教

最新推荐文章于 2023-04-11 19:35:13 发布

qq123407476

最新推荐文章于 2023-04-11 19:35:13 发布

阅读量694

点赞数

文章标签： div function class border jquery float

本文链接：https://blog.csdn.net/qq123407476/article/details/6997901

版权

之前想要做一个翻书效果，后来看了别人的代码，再模仿地做出了一个，但感觉还不是很满意，因为这个效果没有可重用性，别人想用我的代码必须要改数值，操作有点麻烦的。

如果点击DIV<right>，则生成一个<cover>的DIV，同时在最上面生成一个DIV<motion>，然后动画变化，cover由平时宽度逐渐变成0，而motion由1逐渐变成平时宽度并左移至页面的左边，这样就会产生翻书的效果。

如果点击DIV<left>，原思想是不变的，但有一个问题，Jquery渐变效果是从左往右的，如果motion从1变成300，那先出现的必定是motion的左边，这样的话就没有我们平常的翻书效果了，因此，我在motion里面再加了DIV<shift>，翻页的时候，motion和cover都与前面一样，但motion不复制上一页内容，由shift复制，动画过程中，shift由左至右平移，宽度不改变，这样看上去就有了翻左页的效果。

效果是做到了，但始终觉得这方法很笨，有没有哪位大大指教指教，现贴出代码，希望高手能给出意见！

注：本人用的是jquery1.5.2min版，还有一些图片什么，可以随便放的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
html, body {
	width:100%;
	height:100%;
	overflow:hidden;
	border:0px;
	margin:0px;
	background:transparent;
}
#all {
	float:left;
	margin-left:335px;
	margin-top:38px;
	width:50%;
	height:100%;
}
#left {
	float:left;
	width:300px;
	height:395px;
	background:#000;
	border:1px solid #999;
}
#right {
	float:left;
	width:300px;
	height:395px;
	background:#000;
	border:1px solid #999;
}
#motion {
	position:absolute;
	width:1px;
	height:395px;
	top:38px;
	z-index:2;
	border:1px solid #999;
	overflow:hidden;
	display:none;
}

.con {
	width:260px;
	height:355px;
	margin:20px;
	font-size:14px;
	line-height:200px;
	color:#fff;
}
.con, .con * {
	display:block;
	width:260px;
	text-align:center;
}
#co{
	display:none;
	position:absolute;
	height:395px;
	background:#000;
	z-index:1;
	overflow:hidden;
}
#shift{
	position:absolute;
	width:300px;
	height:395px;
	background:#333;
	right:0px;
	z-index:2;
}
</style>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script language="javascript">

var om=true;//设置同一时间只能进行一个效果
$(document).ready(function(){
	var user="红叶传情|<img src='images/bookAll.png'/>|往事如茶|油菜花开|玫瑰情思|第一章标题|第二章标题|第三章标题|第四章标题|第五章标题".split("|");//页面内容，以后用AJAX控制
	
	var content="<img src='images/book.png'/>|<img src='images/bookAll.png' />|<img src='images/ba_right.png' />|<img src='http://www.update8.com/js_img/8-24/images/04.jpg'>|<img src='http://www.update8.com/js_img/8-24/images/05.jpg'>|第一章内容|第二章内容|第三章内容|第四章内容|第五章内容".split("|");//页面内容，以后用AJAX控制
	var bw=$(document).width();
	var cu=0;
	
	$("<div id='motion'></div><div id='co'></div>").appendTo($("#right").parent());//临时构造DIV

	var $left = $("#left");
	var $right = $("#right");
	var $cover = $("#co");
	var $motion = $("#motion");

	$($left).css({left:bw/2-300});
	$($right).click(function(){//后翻页效果
		if(om){
			if(cu==user.length-1){//已翻到最后一页
			}else{
				cu++;
				om=false;//禁止其他效果
				
				$($cover).html($($right).html());//生成遮盖层遮盖右边
				$($cover).css({left:bw/2-1,width:300}).show(); 
				
				$($motion).html("<div class=con>"+user[cu]+"</div>");//设置效果层显示下页内容
				$($motion).css({left:bw/2+300,width:1,"background-color":"#333"}).show();
				
				$($right).html("<div class=con>"+content[cu]+"</div>");//右边底显示下页内容
				
				$($cover).animate({width:0},900);//遮盖层动画至消失
				$($motion).animate({left:bw/2-300-1,width:300},1000,function(){   //效果层由1显示到左边页面 
					$($cover).hide();//遮盖层隐藏
					$($left).html($($motion).html());//左边显示效果层内容
					$($motion).hide();//隐藏效果层
					om=true;	
				});
			}
		}
	});
	
	$($left).click(function(){//前翻页效果
		if(om){
			if(cu==0){
			}else{
				cu--;
				om=false;//禁止其他效果
				$($motion).html("<div id='shift'></div>");//新添shiftDIV
				$($cover).html($($left).html());
				$($cover).css({left:"auto",right:bw/2+4,width:300}).show();
				
				$("#shift").html("<div class=con>"+content[cu]+"</div>");//设置效果层显示上页内容
				$($motion).css({left:"auto",right:bw/2+300,width:1}).show();

				$($left).html("<div class=con>"+user[cu]+"</div>");//左衬底显示上页内容
				$($cover).animate({width:0},900);
				
				$("#shift").animate({right:0},1000);//效果层飘移到右边
				$($motion).animate({width:300,right:bw/2-300-2},1000,function(){
					$($cover).hide();
					$($right).html($("#shift").html());//设置右衬底显示效果层内容
					$($motion).hide();//隐藏效果层
					om=true;
				});
			}
		}
	});
});
</script>
</head>

<body>

<div id="all">
  <div id="left">
  	<div class=con>一一一</div>
  </div>


  <div id="right">
  	<div class=con>kjhkjhkjhk</div>
  </div>
</div>




</body>
</html>

PS：感谢 http://www.update8.com/Effects/Pic/11033.html的代码！