JavaScript에서 스프라이트 시트를 사용하려면 어떻게해야합니까?

안녕 내가 이미이 코드가 있습니다JavaScript에서 스프라이트 시트를 사용하려면 어떻게해야합니까?

var refreshIntervalId; 
var myImages = [ 
    "walking1.jpg", 
    "walking2.jpg", 
    "walking3.jpg", 
    "walking4.jpg", 
    "walking5.jpg", 

]; 
var counter = 0; 


function switchImage() { 
    $('#myImage').attr('src', myImages[counter]); 
    counter += 1; 

    if (counter == Number($("#counter").val())) { 
     counter = 0; 
     clearInterval(refreshIntervalId); 



    } 
} 
$(document).ready(function() { 
    $("#animationBtn").click(function(){ 
     refreshIntervalId = setInterval(switchImage, 50); 
    }); 
});

을하지만 지금은 spritesheet을 재생하는 이미지 대신 원하는이 가능할까요? 또는 전체 코드를 변경해야합니까? 누군가 나를 도와 줄 수 있습니까?

출처

2013-10-14 user2852398

이것은 자바가 아닙니다. – BackSlash

당신은 어떻게 [jqueryUI] (http://jqueryui.com/themeroller)가 그것의 아이콘을하는지 보길 원할 것입니다. Sprite 시트를 사용하는 것이 효과적입니다. –

예, 스프라이트 시트의 다른 섹션을 표시하는 것은 다른 이미지를 표시하는 것과 매우 다릅니다. 그것은 실제로 가능합니다. 시도하십시오. – Bergi

스프라이트 시트는 기본적으로 하나 이상의 (또는 여러 개의) 애니메이션 시퀀스를 나타내는 일련의 이미지가 포함 된 이미지 파일입니다.

For example

#nav li a {background-image:url('../img/image_nav.gif')} 
#nav li a.item1 {background-position:0px 0px} 
#nav li a:hover.item1 {background-position:0px -72px} 
#nav li a.item2 {background-position:0px -143px;} 
#nav li a:hover.item2 {background-position:0px -215px;}

번 spritesheet에서 다른 화상을 표시하는 background-position을 변경하여 이미지로드.

스프라이트 시트의 개별 이미지 background-position을 얻으려면 온라인 도구 (필자가 선호하는) spritecow을 확인하십시오.

출처

2013-10-14 14:24:41 Praveen

+1 - 그건 깔끔한 도구입니다! :) 때로는 픽셀 오프셋과 치수 만 그래픽 프로그램을 실행하는 것이 번거로울 수 있습니다. –

@ user1671639 답장을 보내 주셔서 감사합니다.이 코드를 사용하면 다음 코드가 표시됩니다. .sprite { \t background : url ('imgs/walkingman.png') no-repeat 0 0; \t background-size : 1684px 801px; \t 너비 : 0; \t 신장 : 0; } 어떻게 이것을 내 코드와 함께 사용하여 동일한 기능을 할 수 있습니까? – user2852398

@ user2852398 예에서 언급했듯이 개별 요소에 CSS를 추가하십시오. – Praveen

JavaScript에서 스프라이트 시트를 사용하려면 어떻게해야합니까?

답변

관련 문제