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实现图片翻书效果的更多相关文章

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

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  2. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  3. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  4. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

  5. Unity3d:megaFierstext（翻书效果插件）

    附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可 ...

  6. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  7. [知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果

    一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...

  8. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  9. UIScrollView翻书效果

    代码地址如下:http://www.demodashi.com/demo/12695.html 前言:看到凤凰新闻 头条栏目的编辑推荐新闻是这个效果,觉得不错,就想着实现一下,以下就是我的实现过程. ...

随机推荐

  1. vagrant 入门4

    7. 打包 Packaging , 8080 end 2. 打包Project $ vagrant package --vagrantfile Vagrantfile.pkg 8. 打包完成后,在工程 ...

  2. 2013 南京邀请赛 A play the dice 求概率

    /** 大意:给定一个色子,有n个面,每一个面上有一个数字,在其中的m个面上有特殊的颜色,当掷出的色子出现这m个颜色之一时,可以再掷一次..求其最后的期望 思路:假设 期望为ans 4 ans = 1 ...

  3. asp.net 页面执行过程

    Application_BeginRequest Application_AuthenticateRequest Application_AuthorizeRequest Application_Re ...

  4. idea 使用问题总结

    tomcat     edit configurations配置问题:         在deployment选项卡内增加artifact到server,在Application context选择应 ...

  5. 在不连接网线的情况下Windos与VM之间如何ping通

    一般情况下,如果宿主主机的网口连接网线并且能够上网,那么按照VM的默认安装,在VM-Settings-Hardware-Network Adapter-Network connection中选择Bri ...

  6. MYSQL - php 使用 localhost 无法连接数据库

    php 使用 localhost 无法连接数据库,而使用127.0.0.1却能连接成功. 可能原因: 系统hosts文件未提供127.0.0.1到localhost的解析.解决方法(以win7系统为例 ...

  7. 再见了acm

    2013年11月17日长沙区域赛我的最后一场区域赛. 忙碌了三年的acm要停下脚步,一时还无法接受. 这样一个结果有点无奈. 感谢队友,三年三支队伍五个队友,感谢你们.(每当写到这里时就总有点小忍不住 ...

  8. mysql自动备份（windows）

    许多时候,为了数据安全,我们的mysql数据库需要定期进行备份,下面介绍两种在windows下自动备份方法: 1.复制date文件夹备份 ============================ 例子 ...

  9. HDU 5119 Happy Matt Friends（2014北京区域赛现场赛H题 裸背包DP）

    虽然是一道还是算简单的DP,甚至不用滚动数组也能AC,数据量不算很大. 对于N个数,每个数只存在两个状态,取 和 不取. 容易得出状态转移方程: dp[i][j] = dp[i - 1][j ^ a[ ...

  10. 纪念一下第一次写的django代码

    @csrf_exemptdef new_project_detail(request):    if 'project_name' not in request.POST or 'project_po ...