如何仅使用Javascript（没有库）制作灯箱动画效果

Question

I am just new to Javascript. 我刚接触Javascript。 I want to implement lightbox effect without using jQuery. 我想在不使用jQuery的情况下实现灯箱效果。 I can successfully add a fixed div with 100% height and width of body element by using Javascript but there is no animation effect. 我可以使用Javascript成功地添加一个body元素的高度和宽度为100％的固定div，但是没有动画效果。

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

The lightbox div can still cover the entire body element after the script runs over but these is no animation effect. 脚本运行结束后，lightbox div仍可以覆盖整个body元素，但这不是动画效果。

Answer 1

for (var x=1;x<100;x++){
setTimeout(function(){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},50)
}

Is wrong. 是错的。 You set a bunch of timeouts for the same time and try to access x wrongly. 您同时设置了一堆超时，并尝试错误地访问x。 Here: 这里：

for (var x=1;x<100;x++){
    setTimeout(function(x){
        lightbox.style.width=x+"%";
        lightbox.style.height=x+"%";
    },x*50,x)
}

如何仅使用Javascript（没有库）制作灯箱动画效果

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-03-29 05:58:02

如何仅使用Javascript（没有库）制作灯箱动画效果

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-03-29 05:58:02

解决方案1
0 已采纳 2014-03-29 05:58:02