把下面的代码转为vue3的方式“<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 set
Opacity(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)+"%";
set
Opacity(P1i, .5*p*p
);
if
(p
== 20) run
= false;
}
function TPR_
(p) {
P2.
style.width
= 50
-(2.5*p)+"%";
set
Opacity(P2i,
100-.5*
(p*p)
);
if
(p
== 20) {
P2i.src
= IMGSRC[kI].src;
set
Opacity(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)+"%";
set
Opacity(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)+"%";
set
Opacity(P1i,
100-.5*
(p*p)
);
if
(p
== 20) {
P1i.src
= IMGSRC[kI].src;
set
Opacity(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 src
="https
://images.unsplash.com/photo
-1506905925346
-21bda4d32df4?ixlib
=rb
-4.0.3&ixid
=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto
=format&fit
=crop&w
=1000&q
=80">
<IMG src
="https
://images.unsplash.com/photo
-1470071459604
-3b5ec3a7fe05?ixlib
=rb
-4.0.3&ixid
=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto
=format&fit
=crop&w
=1000&q
=80">
<IMG src
="https
://images.unsplash.com/photo
-1448375240586
-882707db888b?ixlib
=rb
-4.0.3&ixid
=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto
=format&fit
=crop&w
=1000&q
=80">
<IMG src
="4.png">
<IMG src
="5.png">
<IMG src
="6.png">
<IMG src
="7.png">
</DIV>
</BODY>
</HTML>”
本文详细解析了CSS中一个div元素的样式设置，包括透明度、定位方式、层级顺序、尺寸及背景颜色等属性，帮助读者更好地理解这些基本概念。
扫一扫
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
