그림과 같이 오늘 제가 한 일은 JQuery를 사용하여 이 효과를 시뮬레이션하는 것이었습니다. 소스 코드는 다음과 같습니다 코드 복사 코드는 다음과 같습니다. </ script> <br><script type="text/javascript"> <br>//data가 데이터베이스에서 얻은 데이터라고 가정<br>var data = {"images/1_small .jpg":["images/ 1_big.jpg","속옷 소녀","주연: Moon Wing Shan, Michelle Cheng"],"images/2_small.jpg":["images/2_big.jpg","Love Trap ","출연: 김정훈, 채린"] ,"images/3_small.jpg":["images/3_big.jpg","소스 코드","출연: 저스틴, 크리스티나"]}; <br>$ (function(){ <br> $.each(data,function(key,value){ <br>var smallimg = $("<img src='" key "'>"); <br>smallimg. attr("bigmappath",value[ 0]); <br>smallimg.attr("personname",value[1]) <br>smallimg.attr("personheight",value[2]); .mouseover(function(e){ <br>$("#detailImg").attr("src",$(this).attr("bigmappath")); <br>$("#detailHeight").text ($(this).attr( "사람키")) <br>$("#detailName").text($(this).attr("사람이름")) <br>$("#details") .css("top",e .pageY).css("left",e.pageX).css("display","") <br>}) <br>$("body").append (smallimg); <br>}) <br></head> <br><div style="display: none;position:absolute;" id ="details"> <br><img id="detailImg" src=""> <br><p id="detailHeight"></p> <br><p id="detailName"></p> <br></div> <br></body> <br><br> <br> 작은 사진은 다음과 같습니다<br> <br> </div> <br>
