배경 벽 스포트라이트 효과 예제의 jquery 구현-JS 튜토리얼-php.cn

코드 복사 코드는 다음과 같습니다. "http://www.w3.org/TR/html4/strict.dtd"> jQuery背景墙聚光灯效果代码 $(window).load(function(){ var spotlight = { // the opacity of the "transparent" images - change it if you like opacity : 0.2, /*아래 변수는 이미지의 너비와 높이에 대한 것이므로 같은 크기 */ imgWidth : $('.spotlightWrapper ul li').find('img').width(), imgHeight : $('.spotlightWrapper ul li').find('img' ).height()

};

//목록 항목의 너비와 높이를 이미지와 동일하게 설정 $('.spotlightWrapper ul li').css({ 'width' :spotlight.imgWidth, 'height' :spotlight.imgHeight });

//목록 항목 위에 마우스를 올리면... $('.spotlightWrapper ul li').hover( function(){

//...그 안의 이미지를 찾아 활성 클래스를 추가하고 불투명도를 1(투명도 없음)로 변경합니다 $(this).find('img') .addClass('active').css({ 'opacity' : 1});

//다른 목록 항목을 가져오고 그 안에 있는 이미지의 불투명도를 스포트라이트에서 설정한 불투명도로 변경합니다. 배열 $(this).siblings('li').find('img').css({'opacity' :spotlight.opacity}) ;

//마우스가 떠날 때... }, function(){

//... 방금 남겨둔 목록 항목 내부의 이미지를 찾아 활성 클래스를 제거합니다 $(this).find('img') .removeClass('active');

});

//마우스가 정렬되지 않은 목록을 벗어날 때... $('.spotlightWrapper ul').bind('mouseleave ',function(){ //이미지를 찾아 불투명도를 1(완전히 표시됨)로 변경 $(this).find('img').css('opacity', 1); });

}); body { background:black; 색상: 흰색; Font-family: 'georgia' } /* 중요하지 않음 */ .spotlightWrapper ul { list-style-type: none; /* 목록 항목(원)의 기본 스타일 제거 */ margin:0px; /* 기본 여백 제거 */ padding:0px; /* 기본 패딩 제거 */ } .spotlightWrapper ul li { float:left; /* 중요: 왼쪽 부동 */ 위치:상대적; /* 상단 및 왼쪽 위치 지정을 사용할 수 있도록 */ } .spotlightWrapper ul li a img { width:200px; /* 필요하지 않습니다. 이미지의 크기를 더 크게 조정한 다음 ' */ position:relative; /* 상단 및 왼쪽 위치 지정을 사용할 수 있도록 */ border:none; /* 기본 파란색 테두리 제거 */ } .spotlightWrapper ul li a img.active { border:4px Solid White; /* 원하는 것을 선택하세요 */ z-index:1; /* 다른 이미지 위에 표시합니다(Z-색인은 0입니다) */ left: -4px; /* 테두리 너비와 동일하지만 음수 */ top: -4px; /* 테두리 너비와 동일하지만 음수 */ } .clear {clear:both; }/* 마지막 항목 뒤의 부동소수점 지우기 */ jQuery背景墙聚光灯效果 点击图 Pictures查看效果

&lt ;!-- 순서가 없는 목록 시작 --> &lt ;/li> &lt ;li>

배경 벽 스포트라이트 효과 예제의 jquery 구현

jQuery背景墙聚光灯效果 点击图 Pictures查看效果 < ;!-- 순서가 없는 목록 시작 --> < ;/li> < ;li>

jQuery背景墙聚光灯效果

点击图 Pictures查看效果

< ;!-- 순서가 없는 목록 시작 -->

< ;/li>

< ;li>