[英]How to center loading animation and make the rest of page like a lightbox effect?
[英]How To Make A Lightbox Animation Effect Only Using Javascript (no library)
我剛接觸Javascript。 我想在不使用jQuery的情況下實現燈箱效果。 我可以使用Javascript成功地添加一個body元素的高度和寬度為100%的固定div,但是沒有動畫效果。
HTML:
<html>
<head>
<title>Lightbox Example</title>
<link rel="stylesheet" href="lightboxstyle.css" type="text/css">
</head>
<body>
<ul>
<li><img class="preview" src="images/blue.jpg" title="blue"></li>
<li><img class="preview" src="images/red.jpg" title="red"></li>
<li><img class="preview" src="images/yellow.jpg" title="yellow"></li>
<li><img class="preview" src="images/green.jpg" title="green"></li>
</ul>
<script src="lightbox.js"></script>
</body>
</html>
底片
.preview {list-style: none;display:inline;width:200px;}
ul li {display:inline;margin-left:1%}
body {background-color:#eee;}
#lightbox {
position:fixed;
left:0;
top:0;
z-index: 999;
background-image:url(images/1.png);
}
Java腳本
function lightboxboot(){
var lightbox=document.createElement("div")
lightbox.id="lightbox"
var ul=document.getElementsByTagName("ul")
ul[0].insertBefore(lightbox)
for (var x=1;x<100;x++){
setTimeout(function(){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},50)
}
}
var image=document.getElementsByClassName("preview")
for (var i=0;i<image.length;i++){
image[i].onclick=lightboxboot;
}
腳本運行結束后,lightbox div仍可以覆蓋整個body元素,但這不是動畫效果。
for (var x=1;x<100;x++){
setTimeout(function(){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},50)
}
是錯的。 您同時設置了一堆超時,並嘗試錯誤地訪問x。 這里:
for (var x=1;x<100;x++){
setTimeout(function(x){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},x*50,x)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.