이 기사에서는 JS 마우스에서 마스크 층을 서핑하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
HTML 페이지 코드 :
다음과 같이 코드를 복사하십시오. <ul>
<li> <A Data-Title = "Science"href = "#"> <i style = "background-image : url (images/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i> <span> 과학 </span> </a> </li>
<li> <a data-title = "animation"href = "#"> <i style = "background-image : url (images/xiaozhan/main_nh8v_2e310001ebd118e.jpg)">
</i> <span> 애니메이션 </span> </a> </li>
<li> <a data-title = "life"href = "#"> <i style = "background-image : url (images/xiaozhan/main_otnr_43a600000a118c.jpg)">
</i> <span> 수명 </span> </a> </li>
<li> <a data-title = "그림"href = "#"> <i style = "background-image : url (images/xiaozhan/main_ud3z_2e510002074f118e.jpg)">
</i> <span> 일러스트레이션 </span> </a> </li>
<li> <a data-title = "music"href = "#"> <i style = "background-image : url (images/xiaozhan/main_krfk_63230018bd125d.jpg)">
</i> <span> 음악 </span> </a> </li>
<li> <a data-title = "natural"href = "#"> <i style = "background-image : url (images/xiaozhan/main_uabs_764f0001ff601190.jpg)">
</i> <span> 자연 </span> </a> </li>
</ul>
JS 코드 :
다음과 같이 코드를 복사하십시오. <script type = "text/javaScript">
$ (function () {
// 마스크 레이어, 마우스가 위로 올라갈 때 높이가 변경되고 더 명확 해집니다.
var $ site_li = $ ( ". site-tag li");
$ site_li.hover (function () {
var indexs = $ site_li.index (this);
.
// 모든 li 요소에서 현재 클릭 li 요소의 인덱스 가져 오기
// 경고 (색인+1);
$ (this) .prev (). css ( "높이", "30");
$ (this) .next (). css ( "높이", "30");
}, 기능 () {
$ site_li.css ( "높이", "50");
});
});
</스크립트>
CSS 코드 :
코드를 다음과 같이 복사하십시오. Ul Li {List-Style : None;}
.site-tag {너비 : 200px; 오버플로 : 숨겨진; z- 안드 덱스 : 5;}
.site-tag li {위치 : 상대; 너비 : 200px; 높이 : 50px; 마진 바닥 : 1px; 오버플로 : 숨겨진;
전환 : 높이 0.5s 용이성; -webkit-transition : 높이 0.5s 용이성;
-모조 전환 : 높이 0.5s 용이성; -O- 전달 : 높이 0.5s 편의;}
.site-tag li a {색상 : #666; 글꼴 크기 : 16px; 글꼴 중량 : 대담한; 라인 높이 : 50px;}
.site-tag li i {디스플레이 : 블록; 높이 : 90px; 배경 위치 : 센터 센터;
불투명도 : 0.3; 필터 : 알파 (불투명도 = 3); /*투명성 설정*/
-webkit-transition : 불투명도 0.5 편의; /**/
-webkit-filter : Grayscale (60%); /**/
}
.site-tag li : 호버 I {불투명도 : 0.9; -webkit-filter : 그레이 스케일 (0%); 전환 : 불투명도 0.5S 편의;}
.tag-tit {display : 블록; 높이 : 100px; 너비 : 700px; 색상 :#666; 글꼴 크기 : 14px;}
.site-tag li .tag-tit {위치 : 절대; 상단 : 0px; 왼쪽 : 10px; Text-Shadow : 1px 1px 1px rgb (0,0,0,0.1);}
A : 호버 .tag-tit {text-shadow : 1px 1px 1px rgb (0,0,0,0.5);}
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.