欢迎来到HTML5中文学习网！

当前位置：首页 > JS代码 > JS特效代码 > 图片特效

JS实现图片翻书效果

2009-08-11　来源/作者：HTML5中文学习网　分类：图片特效　 «»

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实现图片翻书效果-HTML5中文学习网</title>
<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: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
}
#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="In the early morning he departed." src="../down/js/images/12499727220.jpg" tppabs="#down/js/images/12499727220.jpg">
<IMG alt="Believing she had dreamed of the roar of his bike," src="../down/js/images/12499727221.jpg" tppabs="#down/js/images/12499727221.jpg">
<IMG alt="she woke up to the sunshine in her eyelids." src="../down/js/images/12499727222.jpg" tppabs="#down/js/images/12499727222.jpg">
</DIV>
<p>查找更多代码，请访问：<a href="../index.htm" tppabs="#" target="_blank">HTML5中文学习网</a></p>
</BODY></HTML>

运行代码保存代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

用到的图片：

注意：文章不要包含 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

标签：图片特效

CSS Filter属性特效大全

给图片加上播放按钮

JS实现图片翻书效果

图片自动按比例缩小代码（防止页面被图片撑破）

随机显示的广告代码

鼠标跟随图片特效

图片不存在的时候，显示一个默认图片

CSS图片边框效

猜你也喜欢看这些 ······: Arctext弧形文字效果插件（CSS3&jQuery）其他代码2013-02-01; 单行文字循环滚动(jQuery)其他代码2013-02-01; 右侧带缩略图jQuery焦点图代码焦点图2013-01-24; css3动态导航菜单模版菜单导航2013-01-23; 单张放大图片展示效果(jQuery)图片特效2013-01-22

这些是最新的 ······: 仿邮箱密码色条随输入长度变化其他特效2013-01-09; CSS布局：自适应高度的CSS布局CSS样式2012-11-20; CSS布局：根据浏览器宽度自动把布局从三栏切换成两栏加底栏CSS样式2012-11-19; CSS布局：右栏固定宽度,左栏内容先出现同时自适应宽度CSS样式2012-11-19; CSS布局：中栏固定宽度,左右两栏宽度自适应CSS样式2012-11-19