gun.sprite.js - sample 2

아래 예제는 건이네에서 작성한 Sprite in gun.sprite.js (mootools 1.2) 에서 사용된 예제입니다.

1. 단순 애미메이션 (단일 이미지)
2. 구글 흉내내기
3. 게임 캐릭터 움직이기

Sample

Code

htm

css

#buttonContainer { border:1px solid #ccc; height: 40px; width: 364px; margin:10px auto; }
a.btn { display:block; float: left; cursor:pointer; }
h2 {clear:both;}

script

<script type="text/javascript" src="mootools-1.2-core.js"</script>
<script type="text/javascript" src="gun.sprite.js"</script>
<script type="text/javascript">
    var players = {};
    window.addEvent('domready', function() {
        $$('a.btn').each(function(el, idx){
            var id = el.get('id');
            players[id] = new gun.sprite.Sprite(el, {sprite:'url(svc_sprite_all.gif)' , movies:7, movie:idx + 1, framesPerMovie:7, frameSize:[52,37], toRight:false, wrap:false});
            el.addEvent('mouseenter', function() {players[id].reverse();});
            el.addEvent('mouseleave', function() { (function(){players[id].reverse();}).delay(120); });
        });
    });
</script>

Resource

svc_sprite_all.gif (출처 : http://www.google.co.kr)