JS实现图片翻书效果
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实现图片翻书效果的更多相关文章
- JS实现图片翻书效果示例代码
js 图片翻书效果. picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- Turn.js 实现翻书效果的学习与总结
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...
- 15 个最佳 jQuery 翻书效果插件
本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1. BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...
- Unity3d:megaFierstext（翻书效果插件）
附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可 ...
- 基于CSS3新属性Animation及transform实现类似翻书效果
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...
- [知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果
一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...
- 纯css实现翻书效果
前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...
- UIScrollView翻书效果
代码地址如下:http://www.demodashi.com/demo/12695.html 前言:看到凤凰新闻 头条栏目的编辑推荐新闻是这个效果,觉得不错,就想着实现一下,以下就是我的实现过程. ...
随机推荐
- NAS简介
转自IBM资料库:https://community.emc.com/docs/DOC-15977 在20世纪80年代初,英国纽卡斯尔大学布赖恩.兰德尔教授 ( Brian Randell)和同事通过 ...
- github每次push都需要密码以及用户名的解决办法
git remote set-url origin git@github.com:你的账户/项目名称.git就可以直接git push origin master了.
- JS常用方法函数（1）
1.字符串长度截取 function cutstr(str, len) { var temp, icount = 0, patrn = /[^\x00-\xff]/, strre = "&q ...
- 通过原生js的ajax或jquery的ajax获取服务器的时间
在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间. 客户端时间通过 javascript中的Date对象可以获取,如 var dt = new Date() ...
- known good die( KGD) /确认好裸芯片，合格芯片
英文:known good die( KGD) / 中文:确认好裸芯片,合格芯片 完工的晶圆上有许多晶片存在,其单一品质有好有坏,经过老化试验后,其确知电性能良好的晶片即称为己知好晶片.不过,已知好晶 ...
- Outlook Anywhere 每次要输入密码
客户端加入域Exchange OutlookAnywhere使用NTLM验证 2007 2010:
- css中border-width 属性
border-width属性可能的值 值 描述 thin 定义细的边框. medium 默认.定义中等的边框. thick 定义粗的边框. length 允许您自定义边框的宽度. inherit 规定 ...
- Linux UDEV和为MySQL InnoDB共享表空间配置裸设备
⑴ UDEV 基础 udev 可管理保存在/dev 目录下的文件.文件只有在接入相应设备后才会生成.设备被拔出后自动删除 它还允许用户添加规则.以便修改/dev中默认的名称和权 ...
- 轻量级数据库sqlite的接口说明
原文地址:http://www.cnblogs.com/kfqcome/archive/2011/06/27/2136999.html 一．使用流程 要使用sqlite,需要从sqlite官网下载到三 ...
- pyfits过滤数据更新文件。
import pyfits as pf import numpy as np import matplotlib.pyplot as plt hdulist = pf.open("LE_ev ...