1. 인터페이스 미리보기
오른쪽 탭 버튼에 마우스를 올리면 텍스트 투명도가 감소하고 텍스트 일부가 강조 표시됩니다.
데모 주소: http://5thirtyone.com/sandbox/samples/fadefocus/
정말 멋진 효과네요!
2. 구현 원칙
강조할 텍스트에 단락 표시를 추가하고 class="mask"인 div를 마스크 레이어로 사용하여 마스크 레이어가 텍스트 콘텐츠 위에 위치하도록 합니다(z-index 속성, Jquery를 사용하여 단락에 스타일 클래스를 동적으로 추가
3. HTML 코드
아바타(2009년 영화)
/avatar.jpg" alt ="아바타 포스터" />
아바타(제임스 카메론의 아바타라고도 함)는 미국의 3D SF
서사 영화입니다.
제임스 카메론으로, 20세기 폭스에서 2009년 12월 16일 개봉했습니다. < ;a href="http://en.wikipedia.org/wiki/Lightstorm_Entertainment">
Lightstorm Entertainment가 공동 제작했으며 판도라,
공전하는 세 개의 가상 가스 거인 중 하나인 폴리페모스의 거주 위성
Alpha Centauri A.
판도라에서는 인간 식민지 주민과 판도라의 지각 있는 인간형 원주민인
나비족이 행성 자원을 두고 전쟁을 벌이고 있으며 후자의 전쟁은 계속되고 있습니다. 🎜>영화 제목은
가상 세계의 실제 인물을 표현한 아바타를 의미합니다.
< ;span class="d3">이 영화는 2D 및 3D 형식으로 개봉되었으며
일부 극장에서 IMAX 3D 개봉과 함께 획기적인 영화로 평가받고 있습니다.
영화 제작 기술 측면에서 볼 때 영화 제작을 위해 특별히 설계된 카메라를 이용한 3D 시청 및
영화 제작
원본
아바타에 대한 Wikipedia 페이지
탭 표시 엔터티 결과 클래스 버튼에서 각 버튼은 왼쪽 텍스트의 투명도와 단락 텍스트 강조 표시를 제어합니다.
entity-source 클래스에는 강조 표시된 텍스트 단락인 d1 d2 d3이라는 세 개의 단락 범위 Calss가 있습니다.
class="mask"인 빈 div가 마지막에 배치됩니다. 이 Div도 마스크 레이어입니다.
4. CSS 키 코드
코드 복사
코드는
{
디스플레이: 없음
위치; : 절대;
왼쪽: 0;
너비: 100%;
}
엔터티-소스 범위
{
z-색인: 2
}
.entity-source 스팬.show
{
배경: #ffc
색상: #000 ;
}
마스크 클래스의 z-index:1은
z-nidex: 2는 범위 단락이
를 덮도록 만듭니다. 따라서 디스플레이는 단락 텍스트 강조를 실현합니다.
5. Jquery 코드
jQuery( document).ready(function($) {
// 마스크 소스는 마스크의 애니메이션 효과를 제어합니다
var MaskSource = jQuery('.mask');
jQuery('.entity-results'). hover(function( ) {
maskSource.animate({opacity:0.7},1).fadeIn('750');
}, function() {
maskSource.fadeOut('1000');
} );
// 단락 강조 표시를 제어합니다
var Sample2 = jQuery('span.d2'); Sample3 = jQuery('span.d3');
jQuery('a.d1').hover(function() {
sample1.addClass('show'); //문단에 클래스 추가
} , function() {
sample1.removeClass('show'); //단락 클래스 제거
})
jQuery('a.d2').hover(function() {
Sample2.addClass('show');
}, function() {
sample2.removeClass('show')
}); hover( function() {
sample3.addClass('show');
}, function() {
sample3.removeClass('show');
}); ;
애니메이션 함수 animate(params, [duration], [easing], [callback])
Params: 스타일 속성 집합과 해당 값을 애니메이션 속성 및 최종 값으로 사용
기간(선택 사항): 미리 결정된 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 기간을 나타내는 밀리초 값(예: 1000)
완화(선택 사항): 사용할 삭제 효과의 이름(플러그인 지원 필요) 기본적으로 jQuery는 "선형" 및 "스윙"을 제공합니다.
콜백(선택 사항): 애니메이션이 완료되면 실행되는 함수
FadeIn 효과 함수: fadeIn(속도, [콜백])
속도: 미리 결정된 세 가지 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)
콜백(선택): (선택) 애니메이션이 완료되면 실행되는 함수
페이드 아웃 효과 기능 : fadeOut 설명은 fadeIn과 동일
데모 주소 :
http://demo. jb51.net/html/fadefocus/ index.html
패키지 다운로드 주소:
http://xiazai.jb51.net/200912/yuanma/fadefocus.rar
