자바 스 크 립 트 플래시 효과 와 유사 한 입체 이미지 브 라 우 저

PS:효과 도 를 표시 합 니 다.여러분 은 자신의 수요 에 따라 그림 의 스타일 을 조정 할 수 있 습 니 다

코드

 
<style type="text/css"> 
//        
#container{position:absolute;} 
#container img{position:absolute;} 
//         
.mask2{ 
background:#99FF00; 
opacity:0.3; 
filter:Alpha(Opacity='30'); 
position:absolute; 
} 
//              
.mask{ 
background:#99FF00; 
opacity:0.3; 
filter:Alpha(Opacity='50'); 
position:absolute; 
} 
</style> 
<body> 
<div id="container"> 
<!--   --> 
<img src="j1.jpg" style="left:-25px; top:85px; width:50px; height:50px;" onclick="JavaScript:showImg(-1)"/> 
<!--       --> 
<img id="img01" style="z-index:4; left:31px; top:63px; width:74px; height:74px;" onclick="JavaScript:showImg(2)"/> 
<!--           --> 
<div class="mask" style="z-index:4; left:31px; top:63px; width:74px; height:74px;"></div> 
<!--       --> 
<img id="img02" style="z-index:5; left:71px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(1)"/> 
<!--           --> 
<div class="mask2" style="z-index:5; left:71px; top:32px; width:138px; height:138px;"></div> 
<!--     --> 
<img id="img03" style="z-index:6; left:151px; top:0px; width:198px; height:198px;" onclick="JavaScript:showImg(0)"/> 
<!--       --> 
<img id="img04" style="z-index:5; left:291px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(-1)"/> 
<!--           --> 
<div class="mask2" style="z-index:5; left:291px; top:32px; width:138px; height:138px;"></div> 
<!--       --> 
<img id="img05" style="z-index:4; left:395px; top:64px; width:74px; height:74px;" onclick="JavaScript:showImg(-2)"/> 
<!--           --> 
<div class="mask" style="z-index:4; left:395px; top:64px; width:74px; height:74px;"></div> 
<!--   --> 
<img src="j2.jpg" style="left:486px; top:85px; width:50px; height:50px;" onclick="JavaScript:showImg(1)"/> 
</div> 
<script> 
//       
var imgArray = new Array(); 
imgArray[0]="1.jpg"; 
imgArray[1]="2.jpg"; 
imgArray[2]="3.jpg"; 
imgArray[3]="4.jpg"; 
imgArray[4]="5.jpg"; 
imgArray[5]="6.jpg"; 
imgArray[6]="7.jpg"; 
imgArray[7]="8.jpg"; 
imgArray[8]="9.jpg"; 
imgArray[9]="10.jpg"; 
//          
var base = 0; 
//                         ，offset       
function showImg(offset){ 
base=(base-offset)%imgArray.length; 
//   base    5    
for(var i=base;i<base+5;i++){ 
var img = document.getElementById("img0"+(i-base+1)); 
//               
if(i<0){img.src = imgArray[imgArray.length+i];} 
//               
else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];} 
else {img.src=imgArray[i];} 
} 
} 
//             
function initImg(){ 
showImg(3); 
} 
//        
window.onload=initImg(); 
</script> 
</body> 
function initimg(){ 
showImg(3); 
} 
window.onload=initimg(); 
</script> 
</body>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Flash에서 ChatWork에 메시지 게시

Flash가 ChatWork API를 사용할 수 있는지 시도했습니다. 에 상세한 것이 쓰여져 있습니다. 채팅 작업 API를 사용하면 메시지 전송 및 작업 추가와 같은 채팅 작업의 기능을 외부 프로그램에서 쉽게 사용할...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

자바 스 크 립 트 플래시 효과 와 유사 한 입체 이미지 브 라 우 저

좋은 웹페이지 즐겨찾기