原生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 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
vue实现图片懒加载的方法分析
Feb 05 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(一)
2012/03/21 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php目录操作实例代码
2014/02/21 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
Pycharm设置界面全黑的方法
2018/05/23 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
园长自我鉴定
2013/10/06 职场文书
《尊严》教学反思
2014/02/11 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
军训决心书范文
2015/09/22 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书