웹 프런트엔드 디자이너가 일반적으로 사용하는 jQuery 특수 효과 플러그인 요약_jquery

1.jQuery 마우스 오버 시 텍스트 페이드인 애니메이션 효과

JQuery 기반의 마우스 오버 텍스트 페이드 인/아웃 애니메이션 효과에 대한 소스 코드입니다. 마우스를 올리면 점차적으로 투명 마스크 레이어가 나타나는 그림입니다. 텍스트가 오른쪽에서 슬라이드 아웃되면 전체적인 효과가 아름답고 자연스러워지며 사용자 경험이 더 좋아집니다. 비교적 뛰어난 특수효과 소스코드입니다. 소스 코드는 최신 주류 브라우저와 호환됩니다.

온라인 데모

소스코드 다운로드

2. Small2big 기반의 jquery로 구현된 이미지 강조 효과

Jquery의 small2big 플러그인을 기반으로 한 특수 효과 소스 코드를 강조 표시한 그림입니다. 그림 위로 마우스를 이동하면 그림의 확대 및 강조 효과가 나타납니다. 모두가 선택할 수 있는 세 가지 표시 효과가 있습니다.

온라인 데모

소스코드 다운로드

3. DIV CSS로 구현한 Tmall 유명 가맹점 탐색 요약 페이지의 효과

DIV CSS에서 구현한 Tmall 유명 가맹점 탐색 페이지 효과 소스 코드는 Tmall의 모든 유명 가맹점의 URL과 이름을 요약하여 각 가맹점에 대한 카테고리로 표시하는 코드이기도 합니다. 검색 기능과 실제 매장 URL.

온라인 데모

소스코드 다운로드

4. jquery CSS로 구현된 ul li는 드롭다운 상자 형태의 미화 효과를 모방합니다

jquery CSS로 구현한 ulli는 DIV CSS와 jquery로 구현한 드롭다운 박스 형태 미화 특수효과 소스코드를 모방한 것입니다.

온라인 데모

소스코드 다운로드

5. 재생 제어 및 볼륨 조절을 지원하는 HTML5 기반의 원형 음악 플레이어

오늘은 더 멋있어 보이는 HTML5 뮤직 플레이어를 공유하고 싶습니다. 플레이어는 원형이고 배경 이미지가 매우 아름답습니다. 플레이어에서 재생 제어, 볼륨 조절 및 기타 일반적으로 사용되는 기능을 사용할 수 있습니다.

온라인 데모

소스코드 다운로드

6. 순수 CSS3로 구현한 마우스 오버 이미지 텍스트 애니메이션 효과

순전히 CSS3로 구현된 마우스오버 이미지 텍스트 애니메이션 효과의 소스코드는 CSS3를 사용하여 구현되었으며, 이는 로딩 속도가 빠르고 메모리 사용량이 적으며 사용하기 쉽습니다.

온라인 데모

소스코드 다운로드

7. jQuery 기반의 라벨 그림 탭 전환 효과

jQuery를 기반으로 구현된 컬러 라벨 이미지 탭 전환 효과 코드는 로딩 속도가 빠르고 메모리 사용량이 적으며 사용하기 쉽습니다.

온라인 데모

소스코드 다운로드

8. jquery로 구현한 작은 이미지의 원래 위치를 클릭하면 이미지가 커지는 효과의 소스코드

jquery로 구현한 작은 그림을 클릭하면 원래 위치에서 확대되는 효과의 소스코드는 작은 그림을 클릭하면 원래 위치에 큰 그림이 나타나는 코드입니다. .시나 웨이보와 마찬가지로 작은 사진을 클릭하면 원래 위치로 이동합니다. 사진 확대의 단점은 지정된 ID 내의 이미지에 확대 코드를 자동으로 추가하는 것이 가장 좋습니다. , 또는 자동으로 확대되도록 설정합니다.

온라인 데모

소스코드 다운로드

9.js에서 구현한 마우스 스크롤 컨트롤 이미지는 원래 위치에 비례하여 크기가 조정되었습니다

js로 구현한 원래 위치의 마우스 스크롤 제어 이미지 스케일링 소스코드는 마우스를 중심으로 마우스 축을 스크롤하여 이미지를 같은 비율로 확대하거나 축소할 수 있는 코드입니다.

온라인 데모

소스코드 다운로드

gif 커버를 클릭하면 gif 동적 사진을 로드하는 js 특수 효과의 10.js 구현

gif 표지를 클릭한 후 gif 동적 사진을 로드하기 위해 js에서 구현한 js 특수 효과 소스 코드는 gif 표지를 클릭한 후 gif 형식의 동적 사진 내용을 로드하는 코드입니다. 모든 웹사이트.

온라인 데모

소스코드 다운로드

위는 프론트엔드 디자이너가 마스터해야 할 편집자가 편집한 10가지 jQuery 특수 효과입니다. 모두 매우 일반적으로 사용되는 효과입니다.