그라디언트 효과가 있는 드롭다운 메뉴 특수 효과 코드 [웹 페이지 특수 효과]

저자：Eve Cole 업데이트 시간：2009-06-20 15:45:50

제품 썸네일 위로 마우스를 이동하면 큰 이미지가 팝업됩니다. 이는 JS에 두 가지 기능을 작성하여 달성할 수 있습니다. 하나는 이미지 위로 마우스를 이동할 때 호출되어 숨겨진 레이어를 표시하고 이미지를 로드하는 것입니다. 레이어; 다른 함수는 마우스가 이미지 밖으로 이동할 때 호출되며 레이어의 내용이 지워지고 레이어가 숨겨집니다. 이용시 "this.src"를 상품 이미지 주소로 변경해주셔야 합니다.

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>마우스 포인터 이후 그림의 흥미로운 프롬프트 효과 downcodes.com</title> <script 언어="javascript"> 함수 showPic(sUrl){ var x,y; x = event.clientX; document.getElementById("Layer1").style.left = x; ").style.top = y; document.getElementById("Layer1").innerHTML = "<img src="" + sUrl + "">"; document.getElementById("Layer1").style.display = "블록"; } function HiddenPic(){ document.getElementById("Layer1").innerHTML = ""; document.getElementById("Layer1").style.display = "none" } </script> </ head> <body> <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div> <img src="/images/logo.gif" onmouseout="hiddenPic( );" onmousemove="showPic(this.src);" /> <p></p> <img src="/img/200406301.jpg" onmouseout="hiddenPic();" onmousemove="showPic( this. src);" /> </body> </html>