原生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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
详解vue.js的devtools安装
May 26 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
基于input动态模糊查询的实现方法
Dec 12 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
js实现内置计时器
Dec 16 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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/01/10 PHP
8个PHP数组面试题
2015/06/23 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Yii2中datetime类的使用
2016/12/17 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
《中国的气候》教学反思
2014/02/23 职场文书
重阳节标语大全
2014/10/07 职场文书
老乡聚会通知
2015/04/23 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python