我刚接触 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>
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;
}
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)
}
关于javascript - 如何仅使用 Javascript 制作灯箱动画效果(无库)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22727617/