原生JS实现图片翻书效果
程序员文章站
2023-12-28 12:23:34
下面给大家分享基于原生js实现的图片翻书效果，具体代码如下所示：
下面给大家分享基于原生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实现图片翻书效果，希望对大家有所帮助