简易JQuery翻书插件，轻松实现翻书效果
作者：翅膀的初衷 来源：本站原创 发布时间：2013-10-09 查看数：62444
实现原理：使用四个div,左边两个，一个在上一个在下，右边两个一个在上一个在下，点击右边向左翻时，先将右边下面的DIV内容更新为下一页的内容，然缩小上面的DIV宽度直到为零时，将此DIV内容更新为下面DIV的内容并设置宽度为原始大小。然后将左边下面DIV的内容更新为上面DIV的当前内容，然后将上面的DIV宽度设为零，再将上面DIV的内容更新为下一页的内容，再慢慢展开直到恢复原始大小，这样就完成了一样翻页，点左边向右翻也是同样的道理！如果再加个逐渐变黑，效果更好！不多说，直接上代码：
(function($){
$.fn.JNBooks=function(setting){
var jnbooks_index=0;
var jnbook_runing = false;
if(!setting || setting.length<1){
return;
}
if(this.css("overflow")!='hidden'){
this.css("overflow","hidden");
}
if(this.css("position")!="absolute"||this.css("position")!="relative"){
this.css("position","relative");
}
var jnbooks_width = this.width() / 2;
var jnbooks_height = this.height();
var backLeftBox = document.createElement("div");
backLeftBox.style.cssText="width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; left:0px; z-index:1; background-color:#fff;overflow:hidden";
var backRightBox = document.createElement("div");
backRightBox.style.cssText="width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; right:0px; z-index:1; background-color:#fff;overflow:hidden";
var bookLeftBox = document.createElement("div");
bookLeftBox.style.cssText="cursor:pointer;width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; right:"+jnbooks_width+"px; z-index:2; background-color:#fff;overflow:hidden";
var bookRightBox = document.createElement("div");
bookRightBox.style.cssText="cursor:pointer;width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; left:"+jnbooks_width+"px; z-index:2; background-color:#fff;overflow:hidden";
backLeftBox.innerHTML=setting[0][0];
backRightBox.innerHTML=setting[0][1];
bookLeftBox.innerHTML=setting[0][0];
bookRightBox.innerHTML=setting[0][1];
var step = parseInt(jnbooks_width / 3);
bookLeftBox.onclick=function(){
if(jnbooks_index<=0||jnbook_runing){
return;
}else{
jnbook_runing=true;
backLeftBox.innerHTML=setting[jnbooks_index-1][0];
var timer = setInterval(function(){
if(parseInt(bookLeftBox.style.width)<=0){
clearInterval(timer);
bookLeftBox.innerHTML=backLeftBox.innerHTML;
bookLeftBox.style.width=jnbooks_width+"px";
bookRightBox.style.width="0px";
backRightBox.innerHTML=bookRightBox.innerHTML;
bookRightBox.innerHTML=setting[jnbooks_index-1][1];
timer = setInterval(function(){
if(parseInt(bookRightBox.style.width)>=jnbooks_width){
clearInterval(timer);
bookRightBox.style.width=jnbooks_width+"px";
jnbooks_index--;
jnbook_runing=false;
}else{
bookRightBox.style.width = (parseInt(bookRightBox.style.width)+step)+"px";
}
},20);
}else{
var length = parseInt(bookLeftBox.style.width)-step;
if(length<0){
length=0;
}
bookLeftBox.style.width=length+"px";
}
},20);
}
}
bookRightBox.onclick=function(){
if(jnbooks_index>=setting.length-1||jnbook_runing){
return;
}
jnbook_runing=true;
backRightBox.innerHTML=setting[jnbooks_index+1][1];
var timer = setInterval(function(){
if(parseInt(bookRightBox.style.width)<=0){
clearInterval(timer);
bookRightBox.innerHTML=backRightBox.innerHTML;
bookRightBox.style.width=jnbooks_width+"px";
bookLeftBox.style.width="0px";
backLeftBox.innerHTML=bookLeftBox.innerHTML
bookLeftBox.innerHTML=setting[jnbooks_index+1][0];
timer = setInterval(function(){
if(parseInt(bookLeftBox.style.width)>=jnbooks_width){
clearInterval(timer);
bookLeftBox.style.width=jnbooks_width+"px";
jnbooks_index++;
jnbook_runing=false;
}else{
bookLeftBox.style.width=(parseInt(bookLeftBox.style.width)+step)+"px";
}
},20);
}else{
var length = parseInt(bookRightBox.style.width)-step;
if(length<0){
length=0;
}
bookRightBox.style.width=length+"px";
}
},20);
}
this.append(backLeftBox);
this.append(backRightBox);
this.append(bookLeftBox);
this.append(bookRightBox);
}
})(jQuery);
使用方法：
将上面的代码复制下来，保存为jquery.JNBooks.js
然后在页面中引用JQuery与jquery.JNBooks.js
<script type="text/javascript" src="Script/jquery.js" ></script>
<script type="text/javascript" src="Script/jquery.JNBooks.js" ></script>
然后调用
$("div").JNBooks();
完整例子
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JNBooks演示效果</title>
<script type="text/javascript" src="Script/jquery.js" ></script>
<script type="text/javascript" src="Script/jquery.JNBooks.js" ></script>
</head>
<body>
<div style="width:300px; height:200px; font-size:12px; line-height:20px; border-left:solid 1px #ccc; border-bottom:solid 3px #666; border-right:solid 2px #666; border-top:solid 1px #ccc;" id="JNBooks">
</div>
<script type="text/javascript">
var list = new Array();
list.push(new Array('<img src="http://www.jiniannet.com/resources/upload/Images/Demo1.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">产品介绍：欢迎使用JQuery翻书效果插件JNBooks</div>'));
list.push(new Array('<img src="http://www.jiniannet.com/resources/upload/Images/Demo2.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">您可以放图片也可以放文字，自由编辑HTML</div>'));
list.push(new Array('<img src="http://www.jiniannet.com/resources/upload/Images/Demo3.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">欢迎使用</div>'));
$("#JNBooks").JNBooks(list);
</script>
</body>
</html>
演示效果
::: {#JNBooks} :::
湘公网安备 43010302000398号