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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
Vue引入Stylus知识点总结
Jan 16 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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python深入学习之装饰器
2014/08/31 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python 实现兔子生兔子示例
2019/11/21 Python
Python count函数使用方法实例解析
2020/03/23 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
自我鉴定模板
2013/10/29 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
Go语言基础map用法及示例详解
2021/11/17 Golang
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
Python面试不修改数组找出重复的数字
2022/05/20 Python