디자인팁

제이쿼리 gif 플레이어

페이지 정보

작성자 BSAA 작성일16-05-13 17:05 조회1,548회 댓글0건

본문

해당 이미지를 마우스 오버시 gif 애니메이션이 플레이가 되는 방식입니다.

 

샘플 사이트 보기

 

index.html 파일 열어보시면

 

필수 파일

<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script> 자바스크립트 연동 소스

 

 

<script>

 

var imageSwap = function () {                        1. 변수를 생성 후, 이벤트를 걸어줍니다.

var $this = $(this);                                        2. this는 타겟 이미지를 표시하는 태그 입니다.

var newSource = $this.data('swap');              3. 변수를 생성후 타겟 이미지 데이터 값을 swap으로 구한다.

$this.data('swap', $this.attr('src'));        4. 타겟을 정하게 되면 이미지 경로를 블러옵니다.

$this.attr('src', newSource);                  

}

 

$(function () {     

$('img.playgif, list div a').hover(imageSwap, imageSwap); 5. 해당 이미지를 마우스를 오버하는 이벤트를 걸어주고 생성한 변수 이름을 넣어줍니다.

});

</script>

 

 

<img class="playgif" data-swap="animated1.gif" src="animated1.jpg" />

 

해당 이미지에 클레스 이름을 생성 후, 데이터 값을 이미지 경로를 작성해서 불러옵니다.

 

 

 

다운로드


댓글목록

등록된 댓글이 없습니다.