原生JS实现图片翻书效果


Posted in Javascript onFebruary 16, 2017

下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>JS实现图片翻书效果-懒人图库</title>
  <META http-equiv=imagetoolbar content=no>
  <STYLE type=text/css>
    #center {
      LEFT: 50%; POSITION: absolute; TOP: 50%
    }
    #DHTMLBOOK {
      BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
    }
    #TXTBOX {
      FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; 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%
    }
  </STYLE>
  <SCRIPT type=text/javascript><!--
  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) {
    debugger
    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() {
    debugger
    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";
  }
  //-->
  </SCRIPT>
  <META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<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="http://www.lanrentuku.com/down/js/images/12499727220.jpg">
  <IMG alt="Believing she had dreamed of the roar of his bike," src="http://www.lanrentuku.com/down/js/images/12499727221.jpg">
  <IMG alt="she woke up to the sunshine in her eyelids." src="http://www.lanrentuku.com/down/js/images/12499727222.jpg">
</DIV>
</BODY></HTML>

以上所述是小编给大家介绍的原生JS实现图片翻书效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
vue实现分页栏效果
Jun 28 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 #Javascript
js+html制作简单验证码
Feb 16 #Javascript
Vue 仿百度搜索功能实现代码
Feb 16 #Javascript
javascript实现秒表计时器的制作方法
Feb 16 #Javascript
jQuery实现搜索页面关键字的功能
Feb 16 #Javascript
canvas时钟效果
Feb 16 #Javascript
支持移动端原生js轮播图
Feb 16 #Javascript
You might like
php&amp;java(一)
2006/10/09 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
javascript Excel操作知识点
2009/04/24 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python随机读取文件实现实例
2017/05/25 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
对公司合理化的建议书
2014/03/12 职场文书
公民授权委托书范本
2014/09/17 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
结婚主持人致辞
2015/07/28 职场文书
大学生党课感想
2015/08/11 职场文书
2016年母亲节广告语
2016/01/28 职场文书