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 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
Angular脚手架开发的实现步骤
Apr 09 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php实现的验证码文件类实例
2015/06/18 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python解析xml文件实例分析
2015/05/27 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python 实现两个线程交替执行
2020/05/02 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
党校培训自我鉴定
2014/02/01 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
初中同学聚会感言
2014/02/11 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技