JS实现图片翻书效果示例代码


Posted in Javascript onSeptember 09, 2013

picture.html

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS实现图片翻书效果</title> 
<META http-equiv=imagetoolbar content=no> 
<link rel="stylesheet" type="text/css" href="picture.css"/> 
<script type="text/javascript" src="picture.js"></script> 
<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="babi/86d6277f9e2f0708ce332da4e924b899a901f264.jpg"> 
<IMG alt="Believing she had dreamed of the roar of his bike," src="babi/c4aaee1ejw1e3jb8r868vj.jpg"> 
<IMG alt="she woke up to the sunshine in her eyelids." src="babi/7-121205155537-52.jpg"> 
<IMG alt="she woke up to the sunshine in her eyelids." src="babi/c4aaee1ejw1e3jb91py0fj.jpg"> 
<IMG alt="she woke up to the sunshine in her eyelids." src="babi/c4aaee1ejw1e3jb94nx7bj.jpg"> 
</DIV> 
</BODY></HTML>

picture.css
#center { 
LEFT: 50%; POSITION: absolute; TOP: 50% 
} 
#DHTMLBOOK { 
BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 210px; POSITION: relative; TOP: -160px; HEIGHT: 160px 
} 
#TXTBOX { 
FONT-SIZE: 0.8em; WIDTH: 210px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 160px; 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% 
}

picture.js
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"; 
}
Javascript 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
href下载文件根据id取url并下载
May 28 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
jquery与js函数冲突的两种解决方法
Sep 09 #Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 #Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 #Javascript
js 控制页面跳转的5种方法
Sep 09 #Javascript
json格式的时间显示为正常年月日的方法
Sep 08 #Javascript
js获取系统的根路径实现介绍
Sep 08 #Javascript
对于this和$(this)的个人理解
Sep 08 #Javascript
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
基于Django实现日志记录报错信息
2019/12/17 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
详解python的变量缓存机制
2021/01/24 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
借款协议书范本
2014/04/22 职场文书
教师教学评估方案
2014/05/09 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
见习报告格式范文
2014/11/08 职场文书
甲午大海战观后感
2015/06/02 职场文书
php字符串倒叙
2021/04/01 PHP