현재 위치: > 기술 기사 > 웹 프론트엔드 > H5 튜토리얼

  • 스윙에 관한 추천 기사
    스윙에 관한 추천 기사
    HTML5 Canvas를 기반으로 한 또 하나의 3D 애니메이션 걸작입니다. 바람에 펄럭이는 3D 옷 스윙 애니메이션 특수 효과로 매우 사실적입니다. 옷 위에 마우스를 올리면 옷이 흔들리는 애니메이션이 나타납니다. 마우스를 클릭하면 옷이 더욱 심하게 흔들리게 됩니다. 온라인 데모 소스 코드 HTML 코드 다운로드<p style="width:500px;margin:10px auto"<canvas id=&q...
    H5 튜토리얼 1453 2017-06-15 10:46:00
  • 변화에 대한 추천 강좌 4개
    변화에 대한 추천 강좌 4개
    이전 섹션에서는 색상과 픽셀이 무엇인지에 대해 이야기했습니다. 실제로 대부분의 경우 픽셀 수준 작업은 필요하지 않으며 전체 색상만 설정하면 됩니다. 1. 기본 색상 HTML5에서 놀면서 배우기 (2) - 기본 그리기에서 색상을 설정하는 데 사용할 수 있는 두 가지 상황별 속성이 있다고 언급했습니다. 현재 그리려는 색상입니다. 채워진 영역의 색상 값은 CSS3 색상 값 표준을 따르는 유효한 문자열일 수 있습니다. 아래에...
    H5 튜토리얼 1645 2017-06-15 10:45:18
  • 네이티브 드래그 앤 드롭 관련 추천 콘텐츠
    네이티브 드래그 앤 드롭 관련 추천 콘텐츠
    Dragable 속성 이전에는 HTML5의 기본 드래그 앤 드롭에 대한 몇 가지 관련 지식을 소개했습니다. 오늘은 HTML5 드래그 앤 드롭의 또 다른 작은 것들을 소개하겠습니다. 더 이상 고민하지 말고 함께 살펴보겠습니다. 기본적으로 링크, 텍스트, 이미지는 드래그 가능하므로 드래그하기 위해 코드를 작성할 필요가 없습니다. 다른 요소 태그를 드래그할 수 있게 하려면 HTML5만 가능합니다. HTML5는 모든 HTML 요소에 대해 요소를 끌 수 있는지 여부를 나타내는 dragable 속성을 지정합니다. 링크 및 이미지 태그에...
    H5 튜토리얼 1409 2017-06-15 10:33:35
  • 문서 간 특수 효과 10개 추천(컬렉션)
    문서 간 특수 효과 10개 추천(컬렉션)
    HTML5는 문서 간 메시징(Cross-Document Messaging)을 지원합니다. 메시지 통신을 사용하므로 이벤트가 발생해야 합니다. 이벤트의 생성과 소비에 따라 송신자와 수신자, 즉 Sender와 Listener를 찾을 수 있습니다. Litener는 다음 작업을 수행해야 합니다. 메시지 처리 함수를 작성하고 메시지 처리 함수를 등록합니다. addEventListener('message', function, fal...
    H5 튜토리얼 1502 2017-06-15 10:30:56
  • DOM 객체 입문 튜토리얼: 0부터 시작하는 DOM 객체에 대한 10가지 추천 튜토리얼
    DOM 객체 입문 튜토리얼: 0부터 시작하는 DOM 객체에 대한 10가지 추천 튜토리얼
    <canvas></canvas>는 단지 그래픽을 그리기 위한 컨테이너일 뿐이며, id, class, style과 같은 속성도 있습니다. <canvas>> 요소에 그리는 세 가지 주요 단계는 다음과 같습니다. 1. Canvas 개체인 <canvas> 요소에 해당하는 DOM 개체를 가져옵니다. 2. Canvas 개체의 getContext() 메서드를 호출합니다. CanvasRenderingC를 얻으려면...
    H5 튜토리얼 5385 2017-06-15 10:15:36
  • 정의 목록에 있는 추천 강좌 10개
    정의 목록에 있는 추천 강좌 10개
    HTML5에는 많은 기본 태그가 있습니다. 오늘은 목록 태그를 소개하겠습니다. 목록 태그는 웹 페이지에서 텍스트 요소를 목록 형식으로 정렬할 수 있습니다. 목록 태그에는 순서가 있는 목록, 순서가 없는 목록, 사용자 정의 목록이 있습니다. : <ul type =a>                                                                 
    H5 튜토리얼 1424 2017-06-15 10:14:37
  • 로컬 미리보기에 대한 추천 기사 10개
    로컬 미리보기에 대한 추천 기사 10개
    이 기사에서는 업로드된 이미지의 미리보기 효과를 구현하기 위해 주로 JS+HTML5를 소개합니다. 이는 자바스크립트 업로드 이미지의 로컬 미리보기에 대한 구체적인 작업 단계와 관련 구현 기술을 완전한 예제 형식으로 분석합니다. JS+HTML5의 사진 미리보기 효과 업로드에 관한 글입니다. 참고용으로 공유합니다. 세부 사항은 다음과 같습니다: 프로젝트에서 입력 태그 파일 형식의 파일 업로드가 발생했으며, 업로드하기 전에 이미지를 미리 보고 싶었습니다. 그런 다음 페이지에 표시된 주소를 반환합니다.
    H5 튜토리얼 2197 2017-06-15 10:05:00
  • 미디어 요소에 대한 예제 튜토리얼
    미디어 요소에 대한 예제 튜토리얼
    HTML5의 비디오 태그와 비디오 플레이어를 모방하는 효과는 일부 휴대폰에서 널리 사용됩니다. 모바일 버전은 기본적으로 플래시 독재를 폐지하고 HTML5를 마스터로 허용했기 때문에 동영상 지원이 더 좋아졌습니다. 그래서 오늘은 HTML5와 프로젝트에서의 효과적인 적용을 더 잘 이해할 수 있도록 비디오 플레이어를 시뮬레이션하는 HTML5 비디오 태그의 작은 예를 제공하겠습니다. HTML 코드&lt;!--로컬 ogv 오디오를 src에 넣습니다 --&gt;&lt;video&nb...
    H5 튜토리얼 1511 2017-06-15 09:48:28
  • 페이지 액세스 속도에 관한 10가지 추천 기사
    페이지 액세스 속도에 관한 10가지 추천 기사
    원제: Google의 AMP - 모바일 페이지 가속화 저자 Zac은 지난 주 제6차 SEO 순위에서 연설을 하고 국제 SEO 업계의 최신 개발 상황을 공유했습니다. 그 내용 중 하나가 Google의 AMP 프로젝트인데, 여기서도 이야기하겠습니다. AMP(Accelerated Mobile Pages)는 대략 "가속 모바일 페이지"로 번역됩니다. Google이 모바일 페이지의 액세스 속도를 향상시키기 위해 지난해 10월 출시한 기술입니다. 구체적인 기술 세부 사항은 프로젝트 공식 웹사이트에서 확인할 수 있습니다. 간단한 중국어도 있고...
    H5 튜토리얼 1454 2017-06-15 09:34:56
  • 헤더 정의에 관한 8가지 추천 기사
    헤더 정의에 관한 8가지 추천 기사
    1. 전역 헤더를 정의합니다. 이 헤더는 모든 패널의 기본 헤더입니다. &lt;p id="afui"&gt; 내부, 즉 &lt;p id="와 동일한 수준에 헤더 태그를 추가해야 합니다. content"&gt; , ID는 헤더여야 합니다. 예: &lt;!DOCTYPE html&gt; &lt;html&gt;&amp
    H5 튜토리얼 1642 2017-06-15 09:16:35
  • Canvas.toDataURL 특수 효과 5개 추천(컬렉션)
    Canvas.toDataURL 특수 효과 5개 추천(컬렉션)
    문제 배경: 재생된 동영상의 스크린샷을 찍어야 한다는 요구 사항이 발생했습니다. video 태그를 사용하여 동영상이 재생된 후 동영상 재생 영역을 클릭하면 실시간 프레임 사진이 캡처됩니다. 코드는 다음과 같이 매우 간단합니다. var video = document.getElementById('video'); var canvas = doc..
    H5 튜토리얼 1547 2017-06-15 09:16:00
  • 가전제품 추천 기사 10선
    가전제품 추천 기사 10선
    HTML5는 PC 인터넷의 패턴을 전복시키고 모바일 인터넷 경험을 최적화했습니다. 앞으로 몇 년 안에 HTML5는 기본 앱 세계를 전복시킬 것입니다. 크로스 플랫폼: 멀티스크린 시대에 개발자의 고통 지수는 매우 높으며 HTML5가 구세주 역할을 할 수 있기를 모두가 희망합니다. 여러 코드 세트, 다양한 기술 유형의 작업 및 비즈니스 로직 동기화는 고통스러운 프로세스입니다. 초기 개인용 컴퓨터 세계와 조금 비슷합니다. 당시 컴퓨터마다 고유한 운영 체제와 프로그래밍 언어가 있었고 개발자는 서로 다른 버전을 만드는 데 지쳤습니다. 개발자들은 정말 힘이 없었어요...
    H5 튜토리얼 1946 2017-06-14 17:10:44
  • 도메인 간 커뮤니케이션에 관한 10가지 추천 기사
    도메인 간 커뮤니케이션에 관한 10가지 추천 기사
    HTML5는 웹 문서 간 정보를 주고 받는 기능을 제공합니다. 이 기능을 이용하면 해당 웹페이지가 위치한 윈도우 객체의 인스턴스만 얻어지면 동일한 출처(도메인+포트번호)의 웹 웹페이지들끼리 통신이 가능할 뿐만 아니라, 크로스도메인 통신도 가능하다. 달성된다. 브라우저 지원: IE8+, firefox4+, chrome8+ Opera10+1 우선, 다른 창에서 메시지를 받으려면 다음과 같이 창 개체의 메시지 이벤트를 모니터링해야 합니다.
    H5 튜토리얼 1637 2017-06-14 17:06:05
  • window.postMessage에 관한 추천 기사 6개
    window.postMessage에 관한 추천 기사 6개
    이번 글에서는 HTML5 window.postMessage와 크로스 도메인에 대한 자세한 설명을 주로 소개했는데, 이는 실용적인 가치가 매우 높습니다. 이전 글에서는 이를 방지하는 브라우저 동일 출처 정책에 대해 이야기했습니다. 서로 다른 도메인의 페이지를 서로 액세스하지 못하도록 하고 동일 출처 정책의 도메인 간 문제를 해결하기 위해 제안된 솔루션인 하위 도메인 프록시, JSONP, CORS에 대해 자세히 설명합니다. 이 기사에서는 HTML5 window.postMessage에 대해 자세히 설명합니다. postMessage API를 사용하면 문서를 안전하고 제어 가능한 방식으로 연결할 수 있습니다.
    H5 튜토리얼 1557 2017-06-14 15:56:46
  • 게임 개발에 관한 추천 기사 6개
    게임 개발에 관한 추천 기사 6개
    처음 두 기사에서는 RPG의 개발에 대해 지도 추가와 게임 캐릭터 추가를 구현했습니다. 이 기사에서는 지도의 스크롤 스크롤과 캐릭터 대화 구현에 대해 설명합니다. 아래 그림을 참조하고 위 그림의 지침을 따르면 지도 스크롤을 실현하려면 먼저 다가오는 지도(그림의 노란색 부분)를 그린 다음 지도를 스크롤하면 됩니다. , 화면 밖의 부분(그림에서 녹색 부분)을 제거합니다. 먼저 지도 스크롤 여부를 제어하는 ​​변수를 추가합니다.//지도 스크롤 var mapmove = ...
    H5 튜토리얼 1951 2017-06-14 14:20:07

도구 권장 사항

jQuery 기업 메시지 양식 연락처 코드

jQuery 기업 메시지 양식 연락처 코드는 간단하고 실용적인 기업 메시지 양식이자 문의 소개 페이지 코드입니다.
양식 버튼
2024-02-29

HTML5 MP3 뮤직 박스 재생 효과

HTML5 MP3 뮤직 박스 재생 특수 효과는 귀여운 뮤직 박스 이모티콘을 만들고 전환 버튼을 클릭하는 HTML5+css3 기반의 MP3 뮤직 플레이어입니다.

HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과

HTML5 멋진 입자 애니메이션 탐색 메뉴 효과는 탐색 메뉴를 마우스로 가리키면 색상이 변경되는 특수 효과입니다.
메뉴 탐색
2024-02-29

jQuery 시각적 양식 드래그 앤 드롭 편집 코드

jQuery 시각적 양식 드래그 앤 드롭 편집 코드는 jQuery 및 부트스트랩 프레임워크를 기반으로 하는 시각적 양식입니다.
양식 버튼
2024-02-29

유기농 과일 및 야채 공급업체 웹 템플릿 Bootstrap5

유기농 과일 및 채소 공급업체 웹 템플릿-Bootstrap5

Bootstrap3 다기능 데이터 정보 배경 관리 반응형 웹 페이지 템플릿-Novus

Bootstrap3 다기능 데이터 정보 배경 관리 반응형 웹 페이지 템플릿-Novus
백엔드 템플릿
2023-02-02

부동산 자원 서비스 플랫폼 웹 페이지 템플릿 Bootstrap5

부동산 자원 서비스 플랫폼 웹 페이지 템플릿 Bootstrap5

간단한 이력서 정보 웹 템플릿 Bootstrap4

간단한 이력서 정보 웹 템플릿 Bootstrap4

귀여운 여름 요소 벡터 자료(EPS+PNG)

이것은 태양, 태양 모자, 코코넛 나무, 비키니, 비행기, 수박, 아이스크림, 아이스크림, 차가운 음료, 수영 반지, 슬리퍼, 파인애플, 소라, 조개, 불가사리, 게를 포함한 귀여운 여름 요소 벡터 자료입니다. , 레몬, 자외선 차단제, 선글라스 등 자료는 JPG 미리보기를 포함하여 EPS 및 PNG 형식으로 제공됩니다.
PNG 소재
2024-05-09

4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)

이것은 빨간색 2023년 졸업 배지 벡터 자료로, 총 4개이며 JPG 미리보기를 포함하여 AI, EPS 및 PNG 형식으로 사용할 수 있습니다.
PNG 소재
2024-02-29

노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)

노래하는 새와 꽃이 가득한 수레로 디자인된 봄 배너 벡터 자료입니다. JPG 미리보기를 포함하여 AI 및 EPS 형식으로 제공됩니다.
배너 그림
2024-02-29

황금 졸업 모자 벡터 자료(EPS+PNG)

이것은 JPG 미리보기를 포함하여 EPS 및 PNG 형식으로 제공되는 황금 졸업 모자 벡터 자료입니다.
PNG 소재
2024-02-27

가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿

가정 장식 청소 및 유지 관리 서비스 회사 웹 사이트 템플릿은 가정 장식, 청소, 유지 관리 및 기타 서비스 조직을 제공하는 홍보 웹 사이트에 적합한 웹 사이트 템플릿 다운로드입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.

신선한 색상의 개인 이력서 가이드 페이지 템플릿

신선한 컬러 매칭 개인 구직 지원 이력서 가이드 페이지 템플릿은 신선한 컬러 매칭 스타일에 적합한 개인 구직 이력서 작업 표시 가이드 페이지 웹 템플릿 다운로드입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.

디자이너 크리에이티브 작업 이력서 웹 템플릿

디자이너 크리에이티브 작업 이력서 웹 템플릿은 다양한 디자이너 직위에 적합한 개인 작업 이력서 표시를 위한 다운로드 가능한 웹 템플릿입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.

현대 엔지니어링 건설 회사 웹사이트 템플릿

현대 엔지니어링 및 건설 회사 웹 사이트 템플릿은 엔지니어링 및 건설 서비스 산업 홍보에 적합한 다운로드 가능한 웹 사이트 템플릿입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.