js图片翻书效果代码分享


Posted in Javascript onAugust 20, 2015

这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码。

七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习。

运行效果图:

js图片翻书效果代码分享

大家可以先运行一下    -------------------------------------效果运行-----------------------------------------

为大家分享的jQuery幻灯片带缩略图轮播代码如下

<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) {
 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";
}
//-->
</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="JS实现图片翻书效果" src="img/1.jpg">
<IMG alt="JS实现图片翻书效果" src="img/2.jpg">
<IMG alt="JS实现图片翻书效果" src="img/3.jpg"></DIV>

</BODY></HTML>

以上就是为大家分享的javascript图片翻书效果,希望大家可以喜欢。

Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 #Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 #Javascript
javascript如何操作HTML下拉列表标签
Aug 20 #Javascript
七夕情人节丘比特射箭小游戏
Aug 20 #Javascript
js脚本分页代码分享(7种样式)
Aug 19 #Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 #Javascript
JS文字球状放大效果代码分享
Aug 19 #Javascript
You might like
PHP cron中的批处理
2008/09/16 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP编写简单的App接口
2016/08/28 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
python 运算符 供重载参考
2009/06/11 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python之super的使用小结
2018/08/13 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
高中毕业自我鉴定
2013/12/13 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
需求分析说明书
2014/05/09 职场文书
实习单位指导教师评语
2014/12/30 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
为自己工作观后感
2015/06/11 职场文书