이 기사에서는 마우스를 유도하는 div 층의 구배 표시를 실현하기위한 JS+CSS의 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 마우스의 그라디언트 디스플레이를 감지하기 위해 JS+CSS에 의해 구현 된 <title> div 층 </title>
<스타일>
#팁{
위치 : 절대;
왼쪽 : 90px;
너비 : 0px;
높이 : 0px;
색상 : #fff;
글꼴 크기 : 12px;
배경색 :#000;
국경 : 1px Solid #Def;
필터 : 알파 (불투명도 = 0);
불투명도 : 0;
Z- 인덱스 : 999;
}
</스타일>
<script type = "text/javaScript">
<!-
// 재사용 속도가 높기 때문에 "지정된 DOM 노드 가져 오기"기능을 정의합니다.
function $ (d) {return document.getElementById (d);}
// 점진적으로 표시 할 DIV를 제어합니다
var i = 0;
함수 change_show () {
var obj = $ ( "팁");
i = i+5; // 속도를 서서히 표시합니다
obj.style.filter = "alpha (incacity =" + i + ")"; // 투명성이 점차 감소합니다
obj.style.opacity = i/100; // Firefox와 호환됩니다
if (i> = 100) {
ClearInterval (S);
i = 0;
}
}
// DIV 제어 DIV가 점차 사라집니다
var j = 100;
함수 change_hidden () {
var obj = $ ( "팁");
J = J-5; // 속도가 서서히 사라집니다
obj.style.filter = "alpha (exacity =" + j + ")"; // 투명성이 점차 증가합니다
obj.style.opacity = j/100; // Firefox와 호환됩니다
if (j <= 0) {
ClearInterval (H);
//obj.style.display="none ";
j = 100;
}
}
// change_show () 동작을 제어합니다
var s;
함수 쇼 (x) {
if (s) {clearinterval (s);}
$ ( "tip"). style.display = "block";
s = setInterval (Change_show, 1);
}
// change_hidden () 동작을 제어합니다
숨겨진 기능 (x) {
$ ( "tip"). innerhtml = "";
H = setInterVal (Change_Hidden, 1);
}
//->
</스크립트>
</head>
<body>
<div id = "tip"style = "배경색 : 파란색; 너비 : 48%; 높이 : 48%;" OnMouseOver = "show (this);" onmouseout = "숨겨진 (this);">
</div>
<br />
<br> 마우스 슬라이드는 여기서 슬라이드를, Div 레이어 그라디언트 디스플레이는 인터넷에 수집 된 <br> <hr>가 상업적 목적이 아닌 관심과 학습 커뮤니케이션 만 표시됩니다. </font> </p>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.