저는 Javascript를 처음 사용합니다. jQuery를 사용하지 않고 라이트 박스 효과를 구현하고 싶습니다. 자바 스크립트를 사용하여 본체 요소의 높이와 너비가 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>
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);
}
자바 스크립트
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는 스크립트가 실행 된 후에도 여전히 전체 본문 요소를 덮을 수 있지만 애니메이션 효과는 아닙니다.
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)
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다