이 기사에서는 JS에 의해 마우스 감지 이미지 디스플레이를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 마우스 감지 이미지 디스플레이 효과 </title>
<!-[LTE IE 6 인 경우]>
<script language = "javaScript">
var w3cdom = (document.createElement () && document.getElementsByTagName ());
Window.onload = pinballeffect;
함수 pinballeffect ()
{
if (! w3cdom) 반환;
var alelements = document.getElementsByTagName ( '*');
var originalbackgrounds = new Array ();
for (var i = 0; i <alelements.length; i ++)
{
if (대립 표시 [i] .className.indexof ( 'hovereffect')> = 0)
{
대립 요소 [i] .OnMouseOver = MouseGoesOver;
대립 요소 [i] .OnMouseOut = MouseGoesOut;
}
}
}
함수 MouseGoesOver ()
{
OriginalClassNamestring = this.className;
this.className += "lay-on";
}
함수 MouseGoesOut ()
{
this.classname = OriginalClassNamestring;
}
pinballeffect ();
</스크립트>
<! [endif]->
<스타일 유형 = "텍스트/CSS">
몸 {
배경 : #fff;
글꼴 : Small/1.5 "安体", Simsun, Serif;
_font 크기 : 중간;
}
img {
국경 : 없음;
}
ul,
Li,
H5 {
목록 스타일 : 안에 없음;
여백 : 0;
패딩 : 0;
}
.recomm {
배경 :#999;
테두리 : 1px Solid #666;
너비 : 600px;
높이 : 170px;
오버플로 : 숨겨진;
패딩 : 10px;
여백 : 0 Auto;
위치 : 상대;
}
.recomm ul {
국경 : 1px Solid #ffff;
왼쪽 국경 : 없음;
높이 : 168px;
너비 : 599px;
오버플로 : 숨겨진;
*위치 : 절대; /* 오버플로의 문제를 해결하십시오 : 숨겨진은 ie*/에서 요소를 올바르게 숨길 수 없습니다.
}
.recomm li {
플로트 : 왼쪽;
위치 : 상대;
마진 오른쪽 : -179px;
높이 : 100%;
오버플로 : 숨겨진;
흰색 공간 : Nowrap;
텍스트 정렬 : 센터;
}
.recomm li img {
디스플레이 : 블록;
왼쪽 경계 : 1px 고체 #ffff;
너비 : 248px;
높이 : 168px;
}
.recomm li h5 {
위치 : 절대;
하단 : 0;
왼쪽 : 0;
높이 : 20px;
너비 : 239px;
라인 높이 : 20px;
배경 : URL (../ images/1_211621.png) no-repeat;
디스플레이 : 없음;
텍스트 정렬 : 맞습니다.
패딩-오른쪽 : 10px;
글꼴 크기 : 1EM;
글꼴 중량 : 정상;
}
.recomm li : 호버, .recomm .lay-on {
너비 : 249px;
마진 오른쪽 : 0;
}
.recomm li : Hover H5, .recomm .lay-on h5 {
디스플레이 : 블록;
}
</스타일>
</head>
<body>
<div>
<ul>
<li> <a href = "/"> <img src = "/images/m01.jpg"/> </a>
<h5> 빨간 잎은 <a href = "/"> 코드 홈 </a> 2010.09.23 </h5>에 의해 사랑을 전달합니다
</li>
<li> <a href = "/"> <img src = "/images/m02.jpg"/> </a>
<h5> 야생 꽃은 <a href = "/"> Shanshan 영화와 텔레비전 온라인 </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m03.jpg"/> </a>
<h5> 과거는 <a href = "/"> 코드 홈 </a> 2010.09.23 </h5>의 차와 같습니다.
</li>
<li> <a href = "/"> <img src = "/images/m04.jpg"/> </a>
<H5> <a href = "/"> 화려한 영화와 텔레비전으로 꽃이 피는 꽃을 올립니다. </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m05.jpg"/> </a>
<h5> 로즈 사랑 <a href = "/"> 코드 홈 </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m09.jpg"/> </a>
<h5> <a href = "/"> Shanshan 영화와 텔레비전 </a> 2010.09.23 </h5>
</li>
</ul>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.