캔버스 기반 이미지 시퀀스 재생을 위한 imgplay-jQuery 플러그인-H5 튜토리얼-php.cn

캔버스 기반 이미지 시퀀스 재생을 위한 imgplay-jQuery 플러그인

黄舟

풀어 주다： 2017-01-19 13:51:58

원래의

2032명이 탐색했습니다.

간략한 튜토리얼

imgplay는 HTML5 캔버스 기반의 이미지 시퀀스 재생을 위한 jQuery 플러그인입니다. 이 플러그인을 통해 사진 그룹을 차례로 재생할 수 있으며, 일시 정지, 빨리 감기, 되감기 등을 수행할 수 있으며 사진 보기를 위해 전체 화면 모드로 들어갈 수도 있습니다.

사용 방법

이 플러그인을 사용하려면 jquery.imgplay.css와 jQuery 및 jquery.imgplay.js 파일을 페이지에 도입해야 합니다.

<link rel="stylesheet" type="text/css" href="css/jquery.imgplay.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgplay.js"></script>

로그인 후 복사

HTML 구조

이 이미지 플레이어 플러그인의 HTML 구조는 매우 간단합니다.

컨테이너를 사용하여 이미지 요소 그룹을 래핑합니다. 이미지는 src 속성 또는 data-src 속성을 사용할 수 있습니다.

<div id="imageplayer" class="imageplayer">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/5.jpg" />
    <img data-src="img/6.jpg" />
    <img data-src="img/7.jpg" />
    <img data-src="img/8.jpg" />
</div>

로그인 후 복사

초기화 플러그인

페이지 DOM 요소가 로드된 후 imgplay() 메서드를 통해 이미지 재생 플러그인을 초기화할 수 있습니다.

$(document).ready(function(){
   $(&#39;#imageplayer&#39;).imgplay();
});

로그인 후 복사

구성 매개변수

사진 플레이어 플러그인에는 3개의 구성 매개변수가 있습니다.

name: 사진 플레이어의 이름, 기본값은 : "imgplay".
rate: 이미지 재생 빈도. 값이 클수록 더 빠르게 재생됩니다. 최대값은 100이고 최소값은 0.001입니다.
controls: 컨트롤 버튼을 표시할지 여부입니다.

위는 imgplay-canvas 기반 그림 시퀀스 재생 jQuery 플러그인의 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. )!