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中if语句的几种优化代码写法
Mar 12 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
Vue computed 计算属性代码实例
Apr 22 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网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
python爬取酷狗音乐排行榜
2019/02/20 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
应届生求职信写作技巧
2013/10/24 职场文书
村庄绿化方案
2014/05/07 职场文书
大学生求职信
2014/06/17 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python