[英]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.