jQuery 동적 그 라 데 이 션 단추 만 들 기

본 튜 토리 얼 은 다음 과 같은 세 단계 로 나 뉜 다.
Step1 - Photoshop
Step2 - HTML/CSS
Step3 - JavaScript(jQuery)
Step 4-CSS 수정
 
최종 결 과 는 다음 과 같다.

Step1 - Photoshop
1.새 파일
버튼 의 사 이 즈 는 100 px X 80px 이지 만 두 가지 상태 가 있 는 CSS sprite 배경 그림 을 만들어 야 하기 때문에 Photoshop 에서 200 px X 160 px 길이 의 그림 파일 을 만 듭 니 다.다음 그림:

2.참조 선 만 들 기
그리 기 단 추 를 쉽게 만 들 기 위해 서 참고 선 을 만 들 고 눈금 에서 참고 선 을 끌 어 냅 니 다.눈금 을 찾 지 못 하면 Ctrl+R 을 누 르 면 다음 그림 을 표시 할 수 있 습 니 다.

3.모양 그리 기
도구 패 널 의 사각형 도 구 를 선택 하고 원 각 반경 을 10px 로 설정 하여 캔버스 에 모양 을 그립 니 다.다음 그림:

4.모양 스타일 설정
그림 의 마지막 단 계 를 연결 하고 층 을 더 블 클릭 하여 그림 스타일 창 을 열 고 모양 의 스타일 을 설정 합 니 다.먼저 그 라 데 이 션 중첩 을 선택 하고 그 라 데 이 션 색상 을 설정 합 니 다.\#3d3d 에서\#8b8b8b 까지 다음 과 같 습 니 다.

그 다음 에'내 발광'을 선택 하고 혼합 모드 를'정상'으로 설정 합 니 다.불투명 도 는 100%이 고 색상 은\#ffff 로 설정 합 니 다.그림 의 크기 는 3 픽 셀 로 설정 합 니 다.다음 그림 과 같 습 니 다.

그 다음 에'테두리 그리 기'를 선택 하고 크기 를 1 픽 셀 로 설정 하 며 위 치 는'내부'이 고 색상 은 검은색\#000000 입 니 다.다음 그림 과 같 습 니 다.

5.글꼴 추가
텍스트 를 입력 하고 텍스트 의 상대 적 인 수평 과 수직 거 리 를 설정 합 니 다.글꼴 은 사각형 의 정확 한 원형 간 체 이 고 글꼴 은 36 시 이 며 굵 고 부 드 러 우 며 색상 은 흰색(\#FFFF)입 니 다.다음 그림 과 같 습 니 다.

6.글꼴 스타일 설정
같은 텍스트 그래 픽 을 더 블 클릭 하여 텍스트 그래 픽 스타일 을 열 고 글꼴 스타일 을 설정 합 니 다.'투영'을 클릭 하고 혼합 모드 를'정상'으로 설정 합 니 다.색상 은\#3e3e3e 3 e 이 고 투명 도 는 100%이 며 각 도 는 90 도 이 며 거 리 는 1 픽 셀 이 며 크기 는 2 픽 셀 입 니 다."내부 그림자"를 누 르 면 혼합 모드 를"정상"으로 설정 합 니 다.색상 은\#454545 이 고 불투명 도 는 75%이 며 각 도 는 90 도 이 며 거 리 는 1 픽 셀 이 며 크기 는 2 픽 셀 입 니 다.아래 그림 과 같 습 니 다.

이로써 링크 상태 에서 단추 배경 그림 을 완성 합 니 다.효 과 는 다음 과 같 습 니 다.

7.서 스 펜 션 배경 그림
마우스 서 스 펜 션 상태 에서 단추 배경 그림 을 만 들 고 그림 을 그룹 에 넣 고 그룹 을 복사 하고 이동 하 며 이름 을 바 꿉 니 다.다음 그림:

8.배경 그림 속성
hover 배경 그림 의 스타일 속성 을 수정 하고 배경 그림 의 그래 픽 스타일 창 을 열 고'테두리 그리 기'를 선택 하 십시오.테두리 색상 을\#004 d 77 로 변경 합 니 다."그 라 데 이 션 중첩"을 선택 하고 그 라 데 이 션 을\#1671 a3 에서\#5baedc 로 수정 합 니 다.다음 그림:
 

9.글꼴 스타일 설정
글꼴 그래 픽 스타일 을 열 고"투영"을 선택 하 십시오.투영 색상 을\#207 aad 로 변경 합 니 다."내부 그림자"를 선택 하고 글꼴 색상 을\#0d4f 74 로 변경 합 니 다.다음 그림:

10.도 층 반투명
그림 의 반투명 효 과 를 추가 하고 상기 절차 에 따라 수정 합 니 다.마우스 서 스 펜 션 배경 그림 은 다음 과 같 습 니 다.마지막 으로 반투명 층 을 추가 하고 200 px X 40px 의 흰색 층 을 추가 합 니 다.위 에 올 리 고 흰색 층 의 투명 도 를 10%로 설정 합 니 다.다음 과 같 습 니 다.

마지막 으로 저희 가 완성 한 CSS sprite 배경 그림 은 다음 과 같 습 니 다.PSD 파일 다운 로드 를 클릭 하 셔 도 됩 니 다.
Step 2-HTML/CSS 단추 의 HTML 코드 는 매우 간단 합 니 다.전단 파일를 CSS 를 통 해 배경 그림 을 설정 하면 됩 니 다.CSS 코드 는 다음 과 같 습 니 다

 
/*      */ 
.button { 
width:200px; 
height:80px; 
display:block; 
background:url(bg_button.gif) top no-repeat; 
text-indent:-9999px; 
} 
/*      */ 
.button:hover{ 
background:url(bg_button.gif) bottom no-repeat; 
} 

우리 가 앞에서 디자인 한 그림 에 따 르 면 단추 의 길 이 는 200 px X 80px 이 고 배경 그림 은 검은색 단추 입 니 다.이 CSS 는 우리 가 예시 한 첫 번 째 효과(순수 CSS 효과)를 실현 할 수 있다.Step 3-JavaScript/jQuery 는 JavaScript 를 통 해 단 추 를 좀 더 멋 지게 만 들 수 있 습 니 다.우 리 는 그 전에요 소 를 추가 하여 마우스 가 멈 출 때 나타 나 는 배경 층 으로 해 야 합 니 다.그러면 HTML 은 DOM 로드 가 완 료 된 후에 view sourceprint?전단 파일요 소 는 마우스 가 멈 추기 전에 투명 합 니 다.마우스 가 지나 갈 때 점점 투명 하지 않 아 그 라 데 이 션 효 과 를 얻 습 니 다.애니메이션 과정 은 다음 과 같 습 니 다.

상기 분석 을 통 해 jQuery 코드 를 다음 과 같이 쓸 수 있 습 니 다.DOM 로드 가 완 료 된 후에 버튼 링크 에층 을 마우스 로 지나 갈 때의 배경 그림 으로 추가 하고요소 에 마우스 서 스 펜 션 이 벤트 를 추가 할 수 있 습 니 다.마우스 가 지나 갈 때 점점 불투명 해 지고 마우스 가 떠 날 때 점점 투명 해 집 니 다

 
//      <span>   ，    .button  
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () { 
//   <span>      ，          
$('span.hover').css('opacity', 0).hover(function () { 
$(this).stop().fadeTo(650, 1); //       
}, function () { 
$(this).stop().fadeTo(650, 0); //       
}); 
}); 

이로써 우 리 는 JS 코드 를 완 성 했 고 한 단계 더 주의해 야 한다.CSS 수정,Step 4 참조.Step 4-CSS 수정 은 순수 CSS 효과 의 예제 에서 우 리 는 hover 의사 류 를 이용 하여 sprite 그림 의 전환 을 실현 합 니 다.jQuery 를 사용 한 후에층 을 마우스 로 지나 갈 때 배경 그림 으로 도입 하기 때문에 CSS 는 다음 과 같은 수정 을 해 야 합 니 다.프레젠테이션 에서 저 는 확장 예 시 를 제 공 했 습 니 다.귀 하 는 자신 에 게 하 나 를 실현 할 수 있 고 소스 코드 를 다운로드 하여 맞 춤 형 제작 을 수정 할 수 있 습 니 다.물론 좋 은 제안 이나 문제 가 있 으 면 저 에 게 메 시 지 를 남 겨 주 십시오.데모 주소http://demo.jb51.net/js/gcb_download/gradual-change-button.html다운로드 주소http://demo.jb51.net/js/gcb_download/gcb_download.rar