마우스 이동 및 이동 이벤트를 사용하여 이미지 해상도를 변경하는 두 가지 방법

저자：Eve Cole 업데이트 시간：2025-02-08 10:48:02

최근에는 마우스 이동 및 그림 출력 이벤트를 수행하고 있습니다. 시도해 볼 수 있는 방법이 여러 가지 있습니다.

먼저, 해상도를 변경하는 방법에는 두 가지가 있습니다. 마우스를 그림 안으로 옮기는 것과 그림 밖으로 나가는 해상도가 다릅니다.

방법 1

다음과 같이 코드 코드를 복사합니다.

<머리>

<title>사진 목록: 마우스를 안팎으로 움직여 사진의 투명도를 변경하세요</title>

<스타일>

ul,li{margin:0;padding:0;list-style-type:none;}

#imgList{너비:700px;오버플로:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}

#imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}

#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}

#imgList li.current img{opacity:1;filter:alpha(opacity=100);}

</style>

<스크립트>

window.onload = 함수 ()

{

var oLi = document.getElementsByTagName("li");

for(var i = 0; i < oLi.length; i++)

{

oLi[i].onmouseover = 함수 ()

{

this.className = "현재"

};

oLi[i].onmouseout = 함수 ()

{

this.className = ""

}

</script></head>

<본문>

</ul>

</body>

</html>

방법 2

다음과 같이 코드 코드를 복사합니다.

<스크립트 유형="텍스트/자바스크립트">

함수 makevisible(cur, which){

만약 (==0)

cur.filters.alpha.opacity=100

또 다른

cur.filters.alpha.opacity=20

}

</script>

<본문>

</body>

또 다른 방법은 마우스를 그림 안팎으로 움직여 그림 크기를 변경하는 것입니다.

<body> 태그에 코드를 추가하면 그림 위로 마우스가 이동하면 오른쪽 상단으로 그림이 커지고, 그림에서 멀어지면 원래 크기로 돌아갑니다.

다음과 같이 코드 코드를 복사합니다.