实现图片翻书效果JS代码

责任编辑:admin 文章整理: 酷酷视觉录入时间: 2009-8-14 15:01:28

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实现图片翻书效果-酷酷视觉</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>
</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="/Articles/UploadFiles_1065/200908/20090814150601404.jpg">
<IMG alt="Believing she had dreamed of the roar of his bike," src="/Articles/UploadFiles_1065/200908/20090814150602965.jpg">
<IMG alt="she woke up to the sunshine in her eyelids." src="/Articles/UploadFiles_1065/200908/20090814150602713.jpg">
</DIV>
<p>查找更多代码，请访问：<a href=http://www.kukusj.net target="_blank">酷酷视觉</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">

上一篇文章：文本框与内容同步输入的JS代码

下一篇文章：图片自动按比例缩小代码

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

实现图片翻书效果JS代码

热门推荐 Hot

最近更新 New