찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5는 애니메이션 형태로 이미지를 로드합니다. _html5 튜토리얼 기술

HTML5는 애니메이션 형태로 이미지를 로드합니다. _html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:51:481895검색

예제에서는 HTML5 캔버스 태그와 자바스크립트 스크립트를 사용하여 로딩 이미지 효과를 간단히 작성했습니다. 효과를 미리 보려면 HTML5를 지원하는 브라우저를 사용하세요.
아래 그림은 점진적인 수평 그리드 효과를 보여줍니다

html 부분:
XML/HTML 코드클립보드에 콘텐츠 복사
  1. > 
  2. <html lang="ko" > 
  3. <머리> 
  4. <메타 문자 집합="UTF- 8"> 
  5. <제목>html5 이미지 로딩 제목> 
  6. 머리> 
  7. <몸> 
  8. <버튼 클릭="drawImg1( )">왼쪽에서 오른쪽으로버튼>
  9. <버튼 클릭="drawImg2( )">중앙에서 좌우측으로버튼>
  10. <버튼 클릭="drawImg3( " > <시간/> 
  11. <캔버스 클래스
    12. =
  12. "캔버스" id="캔버스" 너비="600" 높이="300">캔버스>  몸> 
  13. html> 
  14. JavaScript 부분: XML/HTML 코드
    15. 클립보드에 콘텐츠 복사
  1. //초기화
  2. var 캔버스 = 문서.getElementById("캔버스"),
  3. 컨텍스트 = 캔버스.getContext("2d"),
  4. 이미지 = 새 이미지()
  5. image.src = "img/test.jpg"
  6. //왼쪽에서 오른쪽으로 로딩 방법
  7. drawImg1() 함수{
  8. var drawWidth = 0,
  9. 간격 = setInterval(function(){
  10. context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height)
  11. drawWidth = 20
  12. if(drawWidth > canvas.width)clearInterval(간격);
    13. },100)
    14. }
    15. //중앙에서 좌우측으로 로딩방식 오픈
    16. drawImg2() 함수{
    17. var
  17. drawWidth = 0,
  18. drawLeft = 캔버스.width/2,
  19. 간격 = setInterval(function(){
    20. context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height)
    21. drawWidth = 20
    22. drawLeft
  22. -= 10; if(drawLeft
    23. <
  23. 0)clearInterval(간격); },100)
    24. }
    25. //점진적 수평 그리드 로딩 방식
    26. drawImg3() 함수{
    27. var
  27. drawWidth
    28. =
  28. 0, spaceWidth
    29. =
  29. canvas.width/20, //10은 분할된 블록의 개수를 의미합니다 간격
    30. =
  30. setInterval(function(){ for(var i
    31. =
  31. 0;i<20;i ){ context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height)
    32. }
    33. drawWidth = 5
    34. if(drawWidth
  34. > spaceWidth)clearInterval(간격);
  35. },100);
  36. }

위 내용은 HTML5에서 애니메이션 형태로 이미지를 로딩하기 위해 편집자가 소개한 내용입니다.

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：간단한 이미지 사전 로드 구성요소를 사용하여 html5 모바일 페이지의 사용자 경험 개선 _html5 튜토리얼 기술다음 기사：간단한 이미지 사전 로드 구성요소를 사용하여 html5 모바일 페이지의 사용자 경험 개선 _html5 튜토리얼 기술

관련 기사

더보기