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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
js获取页面description的方法
May 21 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php的控制语句
2006/10/09 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
Python类class参数self原理解析
2020/11/19 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
Java模拟试题
2014/11/10 面试题
2014年招商引资工作总结
2014/11/22 职场文书
作文批改评语
2014/12/25 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
入团申请书格式
2019/06/20 职场文书
如何书写邀请函?
2019/06/24 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫