原生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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
将PHP作为Shell脚本语言使用
2006/10/09 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
php实现图片压缩处理
2020/09/09 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python能在浏览器能运行吗
2020/06/17 Python
Python 如何创建一个线程池
2020/07/28 Python
python音频处理的示例详解
2020/12/23 Python
业务员的岗位职责
2014/03/15 职场文书
品牌转让协议书
2014/08/20 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
出售房屋协议书范本
2014/10/06 职场文书
党员先进事迹材料
2014/12/19 职场文书
毕业设计工作总结
2015/08/14 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
MongoDB使用场景总结
2022/02/24 MongoDB