如何仅使用 Javascript（无库）制作灯箱动画效果答案

【问题标题】：How To Make A Lightbox Animation Effect Only Using Javascript (no library)如何仅使用 Javascript（无库）制作灯箱动画效果
【发布时间】：2014-03-29 05:51:17
【问题描述】：

我只是 Javascript 的新手。我想在不使用 jQuery 的情况下实现灯箱效果。我可以通过使用 Javascript 成功添加一个具有 100% 高度和宽度的 body 元素的固定 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);
}

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

脚本运行后，灯箱 div 仍然可以覆盖整个 body 元素，但这些不是动画效果。

【问题讨论】：

标签： javascript html css lightbox

【解决方案1】：

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

【讨论】：

这仍然行不通。它修复了计时问题，但每次都会将width 和height 设置为100。每个setTimeout 函数都需要在创建时保留对x 值的引用。闭包可以解决这个问题。
是的，在大多数情况下，将x 作为附加参数传递给setTimeout 会起作用，因为在现代浏览器中setTimeout 会将附加参数作为参数传递给内部函数。虽然 OP 应该知道一些旧版本的浏览器（尤其是 IE）可能不支持这个。
没人支持IE，IE不支持。
谢谢它有效。但是在官方教程中，setTimeout 方法只有两个参数，而在这段代码中，setTimeout 方法有三个参数，一个函数，一个“x*50”，一个“x”。任何人都可以向新手解释一下吗？谢谢！
我不知道你在说什么教程，但是 x 是传递给函数的参数 - 它为函数提供了正确的 x 值。