이미지를 쿼리한 후 큰 이미지를 보기 위한 함수도 추가해야 하므로 js에 메서드를 작성한 다음 이미지의 onmouseover 이벤트에서 이 메서드를 호출하여 작은 이미지 위에 마우스를 올렸을 때 큰 이미지가 자동으로 표시됩니다.
큰 이미지를 표시하고 숨기기 위한 Node.js 코드:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
//사진 표시
함수 오버(imgid,obj,imgbig)
{
//큰 이미지에 표시되는 최대 크기는 4~3,400,300 입니다.
최대폭=400;
최대 높이=300;
//보여주다
obj.style.display="";
imgbig.src=imgid.src;
//1. 너비와 높이가 모두 초과되었습니다. 더 초과하는 경우 나머지 전략은 2와 3에 따릅니다.
//2.너비가 초과되고 높이가 초과되지 않는 경우 너비를 최대값으로 설정합니다.
//3.너비가 초과되지 않고 높이가 초과되면 높이를 최대값으로 설정합니다.
if(img.width>최대 너비&&img.height>최대 높이)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
if(페어>=0)
img.width=최대폭;
또 다른
img.height=최대 높이;
}
else if(img.width>최대 너비&&img.height<=최대 높이)
{
img.width=최대폭;
}
else if(img.width<=maxwidth&&img.height>최대 높이)
{
img.height=최대 높이;
}
}
//사진 숨기기
함수 출력()
{
document.getElementById('divImage').style.display="none";
}
</script>
작은 그림을 표시하는 이미지와 큰 그림을 표시하는 이미지:
다음과 같이 코드 코드를 복사합니다.
<img id="img" src="이미지 주소" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--큰 아이콘이 표시되는 영역--%>
<div id="divImage" style="표시: 없음; 왼쪽: 120px;top:5px; 위치: 절대">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>