首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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"; 
}

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery之ajax技术的详细介绍
Jun 19 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
微信小程序实现弹幕墙（祝福墙）
Nov 18 Javascript
原生JS实现拖拽效果
Dec 04 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
单向链表(1) router(1) 路由(1) 抽象类(1) 乱码(3) Date(1) 扫雷(1) 驱动模型(1) Scheduled(1) 接口(1)
You might like
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
走进AngularJs之过滤器（filter）详解
2017/02/17 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
select标签设置默认选中的选项方法
2018/03/02 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python的即时标记项目练习笔记
2014/09/18 Python
tensorboard显示空白的解决
2020/02/15 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
法警的竞聘演讲稿
2014/01/02 职场文书
人事助理自荐信
2014/02/02 职场文书
市场营销工作计划书
2014/05/06 职场文书
销售类求职信
2014/06/13 职场文书
松材线虫病防治方案
2014/06/15 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
个人向公司借款协议书
2014/10/09 职场文书
实习生矿工检讨书
2014/10/13 职场文书
财务工作失误检讨书
2015/02/19 职场文书
2016新年问候语大全
2015/11/11 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
100句拼搏进取的名言警句，值得一读！
2019/10/07 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript