728x90
300x250
SMALL
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 9pt;
}
#parent1 {
border: 1px solid #000;
position: absolute;
width: 500px;
height: 400px;
left: 50px;
top: 50px;
}
#one {
position: absolute;
left: 50px;
top: 100px;
background-color: blue;
width: 50px;
height: 50px;
display: block;
border-radius: 50%;
}
#move {
position: absolute;
left: 50px;
top: 30px;
}
</style>
<script type="text/javascript" src="../../../libs/jquery-1.11.0.min.js"> </script>
<script type="text/javascript" src="../../../libs/jquery.easing.1.3.js"> </script>
<script>
$(document).ready(function(){
var $one = $("#one");
$("#parent1").click(function(e){
$one.animate({
left:e.offsetX,
top:e.offsetY
},300, "easeOutBounce")
})
})
</script>
</head>
<body>
<div id="parent1">
<span id="one">
</span>
</div>
</body>
</html>
728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
| 스크롤 부드럽게 처리하기 - 비공개 (0) | 2023.05.31 |
|---|---|
| 부드럽게 움직이는 배너 - 비공개 (0) | 2023.05.30 |
| 애니메이션 효과 멈추기 stop (0) | 2023.05.26 |
| animate() 사용자 정의 애니메이션 만들기 (0) | 2023.05.25 |
| 애니메이션 progress 옵션 - 비공개 (0) | 2023.05.24 |
댓글