• 목록

• 페이스북 공유
• 트위터 공유

-------------------- CSS ---------------------

#wrapper { width:100%; height:100%; }

#box { 

position:relative; 

margin:10% auto 0 auto; 

width:400px; 

height:400px; 

border:1px solid #ccc;

border-radius: 50%;

        cursor: pointer; 

}

#ball {

position:absolute; 

left:50%;

top:50%;

margin: -20px 0 0 -20px;

}

---------------- JS --------------

var Ball = {

interval : null,

t : 0,

init : function(){

Ball.obj = $("#ball");

//$("#ball").css({"top":0});

Ball.start();

$("#box").click(function(){

if(Ball.interval) Ball.stop();

else Ball.start();

});

},

start : function(){

Ball.interval = setInterval(function(){

$("#ball").css({

"left": ( Math.sin(Ball.t) *50  )+50+"%", 

"top": ( Math.cos(Ball.t) *50  )+50+"%",

//스케일

//"width" : ( Math.cos(Ball.t) *50 ) +60+ "px",

//"height" : ( Math.cos(Ball.t) *50 ) +60+ "px",

});

Ball.t = Ball.t+ 0.1;

},30);

},

stop : function(){

clearInterval(Ball.interval);

Ball.interval = null;

}

}

$(document).ready(function(){Ball.init();});

----------------------- HTML --------------

<div id="wrapper">

<div id="box">

<img id="ball" src="ball.png" />

    </div>

</div>