如何使用Javascript製作燈箱動畫效果（無庫）

我剛接觸Javascript。我想在不使用jQuery的情況下實現lightbox效果。我可以通過使用Javascript成功添加一個帶有100％高度和寬度的body元素的固定div，但沒有動畫效果。如何使用Javascript製作燈箱動畫效果（無庫）

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>

Stlesheet

.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); 
}

的Javascript

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; 
}

燈箱格可以STIL在腳本運行結束後覆蓋整個body元素，但這些都沒有動畫效果。

來源

2014-03-29 Frank Dai

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) 
}

來源

2014-03-29 05:58:02 bjb568

這仍然行不通。它已經解決了時間問題，但它會每次將'width'和'height'設置爲'100'。每個'setTimeout'函數都需要在創建時保留對'x'的值的引用。封閉將爲此工作。 – redhotvengeance

或者簡單的說法。 – bjb568

是的，在大多數情況下，將'x'作爲'setTimeout'的附加參數傳遞將起作用，因爲在現代瀏覽器中'setTimeout'會將附加參數作爲參數傳遞給內部函數。儘管OP應該意識到一些老版本的瀏覽器（特別是IE）可能不支持這一點。 – redhotvengeance

如何使用Javascript製作燈箱動畫效果（無庫）

回答

相關問題