简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

HTML5 연습 설정 이미지를 greyscale_html5 튜토리얼 기술로

WBOY
풀어 주다： 2016-05-16 15:50:54
원래의
1879명이 탐색했습니다.

과거에는 웹에서 회색조 이미지를 표시하려면 이미지 소프트웨어를 사용하여 수동으로 변환해야 했습니다. 그러나 이제는 이미지 편집 소프트웨어를 사용할 필요 없이 HTML5 캔버스를 사용하여 이 프로세스를 수행할 수 있습니다. 이 기능을 구현하는 방법을 보여주기 위해 html5와 jquery를 사용하여 데모를 만들었습니다.

목적
이 데모에서는 마우스가 이미지 밖으로 이동할 때 HTML5와 jquery를 사용하여 회색조 이미지와 원본 이미지 사이를 전환하는 방법을 보여줍니다. HTML5가 등장하기 전에는 이 기능을 구현하려면 회색조 이미지와 원본 이미지, 총 2개의 이미지를 준비해야 했습니다. 그러나 이제 회색조 이미지가 원본 이미지에 직접 생성되기 때문에 HTML5를 사용하면 더 빠르고 쉽게 이 작업을 수행할 수 있습니다. 파일이나 이미지 표시 기능을 만들 때 이 js 코드가 도움이 되기를 바랍니다.

렌더링

jquery 코드
다음 jquery 코드는 대상 이미지를 찾아 그레이스케일 버전을 생성합니다. 이미지 위로 마우스를 이동하면 회색조 이미지가 기본 색상으로 변경됩니다.

코드 복사
코드는 다음과 같습니다.


인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！