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 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
微信小程序选择图片控件
Jan 19 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
javascript cookies操作集合
2010/04/12 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
小程序自定义日历效果
2018/12/29 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
python实现无边框进度条的实例代码
2020/12/30 Python
python在协程中增加任务实例操作
2021/02/28 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
物流管理专业大学生自荐信
2013/10/04 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
家长给学校的建议书
2014/05/15 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server