基本信息
源码名称：Js翻书效果实例
源码大小：0.46M
文件格式：.7z
开发语言：js
更新时间：2013-01-07
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

Js翻书


  

<html>
<head>
    <title>作者简介</title>
    <meta charset=UTF-8" />
    <META http-equiv=imagetoolbar content=no>
<STYLE type=text/css>
#center 
{
	LEFT: 50%; POSITION: absolute; TOP: 50%
}
#DHTMLBOOK 
{
	BACKGROUND: #000; 
	LEFT: -210px; 
	VISIBILITY: hidden; 
	WIDTH: 450; /*调整书本的宽度*/
	POSITION: relative; 
	TOP: -160px; 
	HEIGHT: 420;/*调整书本的高度*/
}
#TXTBOX {
	FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center
}
.page {
	OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
}
.right {
	BORDER-RIGHT: #000000 1px solid; LEFT: 50%
}
.turn {
	BACKGROUND: #000000
}
.img {
	WIDTH: 200%; POSITION: absolute; HEIGHT: 100%
}
</STYLE>

<SCRIPT type=text/javascript><!--

document.onselectstart = function () { return false; }

var nI  = 0;
var kI  = 0;
var run = false;

function setOpacity(obj,o) {
	if (o<0) o=0; else if (o>100) o = 100;
	if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
	P1.style.left  = 50-(2.5*p) "%";
	P1.style.width = (2.5*p) "%";
	setOpacity(P1i, .5*p*p);
	if (p == 20) run = false;
}
function TPR_(p) {
	P2.style.width = 50-(2.5*p) "%";
	setOpacity(P2i, 100-.5*(p*p));
	if (p == 20) {
		P2i.src = IMGSRC[kI].src;
		setOpacity(P2i, 100);
		P2.style.width = "50%";
		for(var i=1; i<=20; i  ) setTimeout("TPR__(" i ")", i*32);
	}
}
function TPR() {
	if (!run) {
		run = true;
		P01i.src = IMGSRC[kI].src;
		P1.style.width = 0;
		kI  ;
		if (kI>=nI) kI = 0;
		titLe(kI);
		P02i.src = IMGSRC[kI].src;
		P1i.src  = IMGSRC[kI].src;
		for (var i=1; i<=20; i  ) setTimeout("TPR_(" i ")", i*32);
	} else setTimeout("TPR()", 100);
}

function TPL__(p) {
	P2.style.width = (2.5*p) "%";
	setOpacity(P2i, .5*p*p);
	if (p == 20) run = false;
}
function TPL_(p) {
	P1.style.left  = (2.5*p) "%";
	P1.style.width = 40 (10-2.5*p) "%";
	setOpacity(P1i, 100-.5*(p*p));
	if (p == 20) {
		P1i.src = IMGSRC[kI].src;
		setOpacity(P1i, 100);
		P1.style.left  = 0;
		P1.style.width = "50%";
		for(var i=1; i<=20; i  ) setTimeout("TPL__(" i ")", i*32);
	}
}
function TPL() {
	if (!run) {
		run = true;
		P02i.src = IMGSRC[kI].src;
		P2.style.width = 0;
		kI--;
		if (kI < 0) kI = nI-1;
		titLe(kI);
		P01i.src = IMGSRC[kI].src;
		P2i.src  = IMGSRC[kI].src;
		for(var i=1; i<=20; i  ) setTimeout("TPL_(" i ")", i*32);
	} else setTimeout("TPL()", 100);
}
function titLe(p) {
	document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}
onload = function() {
	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
	DB      = document.getElementById("DHTMLBOOK");
	P01     = DB.getElementsByTagName("span")[0];
	P01i    = P01.getElementsByTagName("img")[0];
	P02     = DB.getElementsByTagName("span")[1];
	P02i    = P02.getElementsByTagName("img")[0];
	P1      = DB.getElementsByTagName("span")[2];
	P1i     = P1.getElementsByTagName("img")[0];
	P2      = DB.getElementsByTagName("span")[3];
	P2i     = P2.getElementsByTagName("img")[0];
	nI      = IMGSRC.length;
	P1i.src = IMGSRC[kI].src;
	P2i.src = IMGSRC[kI].src;
	titLe(kI);
	DB.style.visibility = "visible";
}
//-->
</SCRIPT>

<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY>

<DIV id=center>
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>
<SPAN class="page right" onMouseDown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
<SPAN class="page turn right" onMouseDown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN> 
<DIV id=TXTBOX></DIV></DIV></DIV>
<DIV id=imgsrc style="VISIBILITY: hidden">
<IMG alt="" src="img/book.jpg">
<IMG alt="" src="img/book1.jpg">
<IMG alt="" src="img/book2.jpg">
</DIV>
</BODY></HTML>