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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 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
php中长文章分页显示实现代码
2012/09/29 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
在python中使用nohup命令说明
2020/04/16 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
淘宝客服自我总结鉴定
2014/01/25 职场文书
公司活动总结范文
2014/07/01 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技