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. spring mvc 分页

    spring mvc 分页

  2. GDKOI2016

    天若有情天亦老 月若无恨月常圆 Day1 score cardcaptor AAAAAAAATT protal WWWWWWWWWW treasurehunt AAAAWXXXXX map AAATT ...

  3. 百度——地图API——IOS v2.0.2—入门篇

    建议高手飘过------ 本以为一个地图的helloworld很简单.实际使用却不是那么回事.就想把地图的头文件和静态库添加到文件中.应该就能用了. baidu提供的xcode工程是支持ios4.3的 ...

  4. 【转】URL和URI的区别

    [转]URL和URI的区别 译者:华科小涛:http://www.cnblogs.com/hust-ghtao/: 初学http协议,就被这两个相似的术语搞蒙了,查了很多资料,总算搞清楚了.(找资料还 ...

  5. iOS UIWebView 之 UIProgressView

    之前做等待跳转都是用UIActivityIndicatorView ,后来做webView 加载页面的时候,发现了一个特别好用又超级炫酷的加载提示NJKWebViewProgress,作者巧妙的通过计 ...

  6. [Swust OJ 1026]--Egg pain's hzf

      题目链接:http://acm.swust.edu.cn/problem/1026/     Time limit(ms): 3000 Memory limit(kb): 65535   hzf ...

  7. java.lang.NoClassDefFoundError: org.ksoap2.transport.HttpTransportSE异常处理

    原因就是没有打包进去  因为引用进去 编译时没出出现问题 解决如下

  8. Dispatcher & Redirect

    首先理解一下二者的含义:Dispatcher请求转发,直接把客户端的请求在服务器处理以后跳转到下一个页面或者是处理类.此时的地址栏上的URL是不会变化的. Redirect是重定向.客户端的请求到达服 ...

  9. HttpResponseRedirect VS HttpResponse

    当我们处理了post提交的数据之后,我们使用HttpResponseRedirect跳转到另一个页面,而不是用HttpResponse. 例如当一个投票环节时使用HttpResponse可以使用浏览器 ...

  10. mysql not in、left join、IS NULL、NOT EXISTS 效率问题记录

    原文:mysql not in.left join.IS NULL.NOT EXISTS 效率问题记录 mysql not in.left join.IS NULL.NOT EXISTS 效率问题记录 ...