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. this class is not key value coding-compliant for the key detailItem

    我出这个错误是因为,自己的一个视图没有给指定想用的viewController文件..及一个classController控制一个xib文件,忘给该视图指定控制器了.

  2. 腾讯地图之Marker

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 基于visual Studio2013解决C语言竞赛题之0407最大值最小值

      题目 解决代码及点评 这道题考察循环和比较 /*********************************************************************** ...

  4. java面板设计

    写面板真的是写到吐血,深深感受到什么叫又臭又长,可能是自己用的太烂吧. 关于布局管理器不写一下还是不懂,另外加面板的思想跟html中div的感觉差不多. 发现的一个小彩蛋:用JScrollPane的时 ...

  5. android Graphics（二）：路径及文字

    前言:今天项目进入攻关期,他们改Bug要改疯掉了,主管为了激励大家,给大家发了一封邮件,讲到他对项目和学习的理解,一个很好的图形模型,分享给大家,如图在下面给出:(不便给出原文,我仅做转述)无论是学习 ...

  6. c 求两个整数的最大公约数和最小公倍数

    //求最大公约数是用辗转相除法,最小公倍数是根据公式 m,n 的 最大公约数* m,n最小公倍数 = m*n 来计算 #include<stdio.h> //将两个整数升序排列 void ...

  7. c#中的委托使用（方法的调用， 和类的实话）

    方法的调用 delegate int test1(int a); class Program { static int num = 10; static void Main(string[] args ...

  8. ubuntu中在线升级python

    sudo add-apt-repository ppa:fkrull/deadsnakes-python2.7 sudo apt-get update sudo apt-get upgrade 笔记

  9. 利用 操作符特性 代替if判断语句

    参考:http://blog.csdn.net/speedme/article/details/22916181 1.&&的判断特性 #include <stdio.h> ...

  10. diff两个文件夹里的东西

    diff --help -x, --exclude=PAT               exclude files that match PAT 排除某个类型的文件 -u, -U NUM, --uni ...