이미지 x축으로만 화면에서 움직이기
<!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>ballMoving1</title>
<style>
body{
font-size:9pt;
}
#panel{
width:600px;
height:300px;
border:1px solid #999;
position:relative;
}
#bar{
position:absolute;
left:50px;
top:190px;
width:500px;
height:20px;
z-index:10;
border-top:solid 1px #999;
}
#img1{
position: absolute;
left: 50px;
top: 60px;
width: 128px;
height: 76px;
}
#nav{
text-align:center;
width:600px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script>
var $img; // 움직일 이미지
// 추가 tip: position이 relative 인 panel 아래에 absolute이기때문에 이러한 움직임 가능
var $line; // 이미지가 갖게 될 위치
var start_x; // 시작점(고정)
var current_x; // 매시간별 위치
var end_x; // 멈춤점(고정)
var step = 20; // 점진적 이동거리
var myInterval; // interval을 담을 변수
var isPlay = true; // 시작, 멈춤 버튼 연속클리방지위한 기준변수
$(document).ready(function(){
$img = $("#img1");
$line = $("#bar");
start_x = $line.position().left;
current_x = start_x;
end_x = start_x + $line.outerWidth() - $img.innerWidth();
$("#btn_start").bind("click", onStart);
$("#btn_stop").bind("click", onStop);
});
function onStart(){
if(isPlay == true){
myInterval = setInterval( moving, 200);
isPlay = false;
}
}
function onStop(){
clearInterval(myInterval);
isPlay = true;
}
function moving(){
current_x = current_x + step;
$img.css("left", current_x);
if(current_x >= end_x || current_x <= start_x ){
step = step * -1;
}
}
</script>
</head>
<body>
<div>
<div id="panel">
<div id="bar"> </div>
<div id="img1">
<img src="images/ball.jpg">
</div>
</div>
<div id="nav">
<button id="btn_start">시작</button>
<button id="btn_stop">멈춤</button>
</div>
</div>
</body>
</html>
이미지 x축, y축으로 화면에서 움직이기(테두리 안에서만 튕기면서 움직이기)
<!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>ballMoving2</title>
<style>
body{
font-size:9pt;
}
#panel{
width:600px;
height:400px;
border:1px solid #999;
position:relative;
}
#img1{
position: absolute;
left: 244px;
top: 92px;
width: 128px;
height: 128px;
}
#nav{
text-align:center;
width:600px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script>
// 객체
var $panel;
var $img1;
// 고정값
var start_x;
var end_x;
var start_y;
var end_y;
// 변화값
var current_x;
var current_y;
// 속도(고정)
var step_x = 10;
var step_y = 10;
// 이벤트 방지 기준
var isPlay = true;
// interval 담을 변수
var xInterval;
var yInterval;
$(document).ready(function(){
// 아래 변수들 선언
$panel = $("#panel");
$img1 = $("#img1");
// 공의 최초 위치
start_x = $img1.position().left;
start_y = $img1.position().top;
// 테두리의 위치
end_x = $panel.innerWidth() - $img1.outerWidth();
end_y = $panel.innerHeight() - $img1.outerHeight();
// 현재위치 최초 선언
current_x = start_x;
current_y = start_y;
$("#btn_start").bind("click", onStart);
$("#btn_stop").bind("click", onStop);
});
function onStart(){
if(isPlay == true){
xInterval = setInterval( xMoving, 100);
yInterval = setInterval( yMoving, 100);
isPlay = false;
}
}
function onStop(){
clearInterval(xInterval);
clearInterval(yInterval);
isPlay = true;
}
function xMoving(){
current_x = current_x + step_x;
$img1.css("left", current_x);
if(current_x >= end_x || current_x <= 0){
step_x *= -1;
}
}
function yMoving(){
current_y = current_y + step_y;
$img1.css("top", current_y);
if(current_y >= end_y || current_y <= 0){
step_y *= -1;
}
}
</script>
</head>
<body>
<div>
<div id="panel">
<div id="img1">
<img src="images/ball.jpg">
</div>
</div>
<div id="nav">
<button id="btn_start">시작</button>
<button id="btn_stop">멈춤</button>
</div>
</div>
</body>
</html>
스크롤값이용 이미지 올리기
<!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>
body{
font-size:9pt;
}
#panel{
width:600px;
height:400px;
border:1px solid #999;
position:relative;
}
#image_Wrap{
left:200px;
top:80px;
width:220px;
height:220px;
border:1px solid #999;
position:absolute;
overflow:hidden;
}
#image_view img{
display:block;
}
#nav{
text-align:right;
width:600px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script>
// 보이는 화면의 크기보다 이미지가 클경우 사이즈를 줄이는 방법
var $imgWrap; // 그림이 보이는 크기
var imgNum; // 보여질 사진의 수
// 시작, 끝(고정)
var startY = 0;
var endY;
// 내려가는 크기(고정)
var stepY = 2;
// 현재의 위치(변화)
var currentY = 0;
// interval 담을 그릇
var myInterval;
var isPlay = true;
$(document).ready(function(){
$imgWrap = $("#image_Wrap");
imgNum = $imgWrap.children().size();
// 전제: 이미지의 높이가 전부 동일한 사이즈, 부모의 css에서 overflow가 되어있음.(그렇기에 스크롤가능)
// 이미지의 개수 10개중 scroll되어 다시 올라갈 높이는 최초 1개는 작동이 안됨.
// 이미지의 총 개수에서 1개의 이미지 개수를 뺀 것
endY = $imgWrap.innerHeight() * imgNum * 9;
$("#btn_start").bind("click", onStart);
$("#btn_stop").bind("click", onStop);
});
function onStart(){
//alert('1');
if(isPlay == true){
//alert('2');
myInterval = setInterval( onMoving ,20);
isPlay = false;
}
}
function onStop(){
//alert('3');
clearInterval(myInterval);
isPlay = true;
}
function onMoving(){
currentY = currentY + stepY;
//alert('4');
// 부모를 스크롤해준다.
$imgWrap.scrollTop(currentY);
if(currentY >= endY || currentY <= 0){
//alert('5');
stepY *= -1;
}
}
</script>
</head>
<body>
<div>
<div id="panel">
<div id="image_Wrap">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img src="images/img4.jpg">
<img src="images/img5.jpg">
<img src="images/img6.jpg">
<img src="images/img7.jpg">
<img src="images/img8.jpg">
<img src="images/img9.jpg">
<img src="images/img10.jpg">
</div>
</div>
<div id="nav">
<button id="btn_start">시작</button>
<button id="btn_stop">멈춤</button>
</div>
</div>
</body>
</html>