웹마스터 팁
롤링 배너 이해하는데 도움이 될것 같아 올립니다
2013.11.22 22:47
xe에는 오랜만에 글을 올리는거 같네요 :)
sir에 올렸던 팁인데 이렇게도 하는구나 라고 참고하시라 올립니다
몇가지 강좌( ? )를 하다 시간이 나지 않아 이어가질 못했는데
마음이 조금 한가해 지면 그에 관한 글을 마무리 지을려고 합니다
위지윅 에디터 부분도 그렇고 셀렉트 추가 삭제 부분도 그렇고
무엇보다 미니홈피 강좌를 하다 그만두다시피 했는데
이부분도 잊지 않고 있으니 나중을 기약해 봅니다
배너나 혹은 공지등을 롤링 시킬때 사용하면 될거 같고
아래의 소스는 말 그대로 이해하시는데 도움을 드리고자 추가적인 작업을 하지 않은
작업물입니다
좀 더 사용의 편리성을 위한다면
클론 div 부분과 css를 자바스크립트로 만들어 돔( JavaScript HTML DOM ) 의 형태로 넣으면 되겠죠
이하 소스입니다
-----------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<style>
#cover1,#cover2,#cover3,#cover4,#cover5,#cover6,#cover7,#cover8,#cover9,#cover10{
margin: 0px 0px 0px 0px;
padding :0px 0px 0px 0px;
width :200px;
height :25px;
background:#f2f2f2;
border :solid 1px #ccc;
font-family:굴림,돋움;
font-size:9pt;
line-height:120%;
color:#787474;
overflow : hidden;
}
#cover1,#cover2,#cover3,#cover4,#cover5,#cover6,#cover7,#cover8,#cover9,#cover10{
margin: 0px 0px 0px 0px;
padding :0px 0px 0px 0px;
width :200px;
height :25px;
background:#f2f2f2;
border :solid 1px #ccc;
font-family:굴림,돋움;
font-size:9pt;
line-height:120%;
color:#787474;
overflow : hidden;
}
#cover1{
position :absolute;
top : 0px;
left : 0px;
}
#cover2{
position :absolute;
top : 25px;
left : 0px;
}
#cover3{
position :absolute;
top : 50px;
left : 0px;
}
#cover4{
position :absolute;
top : 75px;
left : 0px;
}
#cover5{
position :absolute;
top :100px;
left : 0px;
}
#cover6{
position :absolute;
top : 125px;
left : 0px;
}
#cover7{
position :absolute;
top : 150px;
left : 0px;
}
#cover8{
position :absolute;
top : 175px;
left : 0px;
}
#cover9{
position :absolute;
top : 200px;
left : 0px;
}
#cover10{
position :absolute;
top : 225px;
left : 0px;
}
position :absolute;
top : 0px;
left : 0px;
}
#cover2{
position :absolute;
top : 25px;
left : 0px;
}
#cover3{
position :absolute;
top : 50px;
left : 0px;
}
#cover4{
position :absolute;
top : 75px;
left : 0px;
}
#cover5{
position :absolute;
top :100px;
left : 0px;
}
#cover6{
position :absolute;
top : 125px;
left : 0px;
}
#cover7{
position :absolute;
top : 150px;
left : 0px;
}
#cover8{
position :absolute;
top : 175px;
left : 0px;
}
#cover9{
position :absolute;
top : 200px;
left : 0px;
}
#cover10{
position :absolute;
top : 225px;
left : 0px;
}
/* 커버보다는 2px 작게 */
#msg1,#msg2,#msg3,#msg4,#msg5,#msg6,#msg7,#msg8,#msg9,#msg10{
position :absolute;
top : 0px;
left : 0px;
margin: 0px 0px 0px 0px;
padding :8px 0px 0px 10px;
width:250px;
height :15px;
background:#f2f2f2;
border :solid 0px #ccc;
font-family:굴림,돋움;
font-size:9pt;
line-height:120%;
color:#787474;
}
#clon_msg1,#clon_msg2,#clon_msg3,#clon_msg4,#clon_msg5,#clon_msg6,#clon_msg7,#clon_msg8,#clon_msg9,#clon_msg10{
position :absolute;
top : 25px;
left : 0px;
margin: 0px 0px 0px 0px;
padding :8px 0px 0px 10px;
width:250px;
height :15px;
background:#f7f7f7;
border :solid 0px #ccc;
font-family:굴림,돋움;
font-size:9pt;
line-height:120%;
color:#787474;
}
</style>
<script>
function $(id){
var element="";
if(id==""){
return false;
}
else{
element= document.getElementById(id);
return element;
}
}
#msg1,#msg2,#msg3,#msg4,#msg5,#msg6,#msg7,#msg8,#msg9,#msg10{
position :absolute;
top : 0px;
left : 0px;
margin: 0px 0px 0px 0px;
padding :8px 0px 0px 10px;
width:250px;
height :15px;
background:#f2f2f2;
border :solid 0px #ccc;
font-family:굴림,돋움;
font-size:9pt;
line-height:120%;
color:#787474;
}
#clon_msg1,#clon_msg2,#clon_msg3,#clon_msg4,#clon_msg5,#clon_msg6,#clon_msg7,#clon_msg8,#clon_msg9,#clon_msg10{
position :absolute;
top : 25px;
left : 0px;
margin: 0px 0px 0px 0px;
padding :8px 0px 0px 10px;
width:250px;
height :15px;
background:#f7f7f7;
border :solid 0px #ccc;
font-family:굴림,돋움;
font-size:9pt;
line-height:120%;
color:#787474;
}
</style>
<script>
function $(id){
var element="";
if(id==""){
return false;
}
else{
element= document.getElementById(id);
return element;
}
}
function rolling(num){
if(!num)num=1; //초기에 돌려줄 값
//객체가 없다면 초기값으로 돌림
if(!$("msg"+num)){
num=1;
//clearTimeout(tH); 더 이상 돌리지 않을때 사용
}
// 재귀함수 호출
var tH;
tH=setTimeout(function () { rolling(num); },1);
if(!$("msg"+num)){
num=1;
//clearTimeout(tH); 더 이상 돌리지 않을때 사용
}
// 재귀함수 호출
var tH;
tH=setTimeout(function () { rolling(num); },1);
if($("msg"+num)){ //객체가 존재한다면
//객체를 위로 이동
$("msg"+num).style.top=$("msg"+num).offsetTop-1+"px";
$("clon_msg"+num).style.top=$("clon_msg"+num).offsetTop-1+"px";
//객체를 위로 이동
$("msg"+num).style.top=$("msg"+num).offsetTop-1+"px";
$("clon_msg"+num).style.top=$("clon_msg"+num).offsetTop-1+"px";
if($("msg"+num).offsetTop<=-$("msg"+num).offsetHeight){
$("msg"+num).style.top = 0+"px";
$("clon_msg"+num).style.top = parseInt($("clon_msg"+num).offsetHeight)+"px";
clearTimeout(tH);
// 다음에 움직일 값을 지정
num=parseInt(num)+1;
tH=setTimeout(function () { rolling(num); },3000);
}
}
}
$("msg"+num).style.top = 0+"px";
$("clon_msg"+num).style.top = parseInt($("clon_msg"+num).offsetHeight)+"px";
clearTimeout(tH);
// 다음에 움직일 값을 지정
num=parseInt(num)+1;
tH=setTimeout(function () { rolling(num); },3000);
}
}
}
// 윈도우 온로드시 풀어서 사용하세요
//window.onload=function(){
//rolling();
//}
</script>
</head>
<body>
<div id="rollingDIV" style="position:absolute; left:750px; top:150px;">
//window.onload=function(){
//rolling();
//}
</script>
</head>
<body>
<div id="rollingDIV" style="position:absolute; left:750px; top:150px;">
<div id="cover1">
<div id="msg1">
무궁화1 꽃이 피었습니다
</div>
<div id="clon_msg1">
무궁화1 꽃이 피었습니다
</div>
</div>
<div id="cover2">
<div id="msg2">
무궁화2 꽃이 피었습니다
</div>
<div id="clon_msg2">
무궁화2 꽃이 피었습니다
</div>
</div>
<div id="cover3">
<div id="msg3">
무궁화3 꽃이 피었습니다
</div>
<div id="clon_msg3">
무궁화3 꽃이 피었습니다
</div>
</div>
<div id="cover4">
<div id="msg4">
무궁화4 꽃이 피었습니다
</div>
<div id="clon_msg4">
무궁화4 꽃이 피었습니다
</div>
</div>
<div id="cover5">
<div id="msg5">
무궁화5 꽃이 피었습니다
</div>
<div id="clon_msg5">
무궁화5 꽃이 피었습니다
</div>
</div>
<div id="cover6">
<div id="msg6">
무궁화6 꽃이 피었습니다
</div>
<div id="clon_msg6">
무궁화6 꽃이 피었습니다
</div>
</div>
<div id="cover7">
<div id="msg7">
무궁화7 꽃이 피었습니다
</div>
<div id="clon_msg7">
무궁화7 꽃이 피었습니다
</div>
</div>
<div id="cover8">
<div id="msg8">
무궁화8 꽃이 피었습니다
</div>
<div id="clon_msg8">
무궁화8 꽃이 피었습니다
</div>
</div>
<div id="cover9">
<div id="msg9">
무궁화9 꽃이 피었습니다
</div>
<div id="clon_msg9">
무궁화9 꽃이 피었습니다
</div>
</div>
<div id="cover10">
<div id="msg10">
무궁화10 꽃이 피었습니다
</div>
<div id="clon_msg10">
무궁화10 꽃이 피었습니다
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#" onclick="rolling();">클릭</a>
</body>
</html>
-----------------------------------------------------------------------------------------
이상 소스입니다
function $(id) 이란 평션은
document.getElementById("객체 아이디") 를 일일이 쓰기 귀챦아
제 편의상 만들어 쓰는 것이므로 제이쿼리등과 충돌할 수 있으니
상황에 맞게 사용하세요
$("msg"+num) => document.getElementById("msg"+num)
-기능의 이해-
우선 롤링 되어야할 객체( 이하 롤링 ) 와 롤링후 밑에서 똑같이 올라와야 할 클론(복사본 : 이하 클론 )이 있어야 합니다
원본이 주어진 박스 안에서 벗어나게 되면 그다음 복사본이 그 자리를 올라오면서 메꾸어 줍니다
순차적으로 1번부터 롤링되고 주어진 숫자 ( 여기선 10개를 올렸습니다 ) 10개의 롤링이 끝나면 다시 1번으로 돌아가
롤링을 시작합니다
- 주의 사항 -
하나가 아닌 여러개의 롤링을 써야 하기에
cover1,cover2 와 같이 아이디에는 영문명 숫자로 아이디를 순차적으로 만들어야 함수에서 호출이 됩니다
- css-
#cover1 ~ #cover10
롤링되는 메세지 박스와 클론 박스를 담아두는 테이블입니다
여기서 중요한 것은
overflow : hidden; // 정해진 규격의 크기 이상이 되면 보여지지 않아야 하기에 쓰입니다
position :absolute; //제일 바깥쪽 div를 기준으로 위치를 잡아야 하므로 포지션을 씁니다
top : 0px; //높이 위치는 롤링과 클론의 높이 만큼 더해줍니다 다음것은 25px 그 다음은 50px 그래야 정렬이 됩니다
left : 0px; //왼쪽 위치는 0px로 동일하게 잡아줍니다
overflow : hidden; // 정해진 규격의 크기 이상이 되면 보여지지 않아야 하기에 쓰입니다
position :absolute; //제일 바깥쪽 div를 기준으로 위치를 잡아야 하므로 포지션을 씁니다
top : 0px; //높이 위치는 롤링과 클론의 높이 만큼 더해줍니다 다음것은 25px 그 다음은 50px 그래야 정렬이 됩니다
left : 0px; //왼쪽 위치는 0px로 동일하게 잡아줍니다
#msg1 ~ #msg10
position :absolute; // 커버를 기준으로 하기에 포지션을 씁니다
top : 0px; // 무조건 0px 입니다
left : 0px; // 무조건 0px 입니다
#clon_msg1~ #clon_msg10
position :absolute;
top : 25px;
left : 0px;
top : 25px;
left : 0px;
클론이며 위와 마찬가지의 속성을 가지되
주의할 점은 top의 위치입니다
롤링 밑에 바로 붙어 있어야 하기 때문입니다
롤링 과 클론의 배경색이 약간 틀립니다 이는 음영을 주어 롤링되고 있다는 느낌을 더 주기 위해서 입니다
- 자바스크립트 -
호출은
<a href="#" onclick="rollong();">클릭</a> 와 같이 합니다
윈도우 로드후 함수 실행은 위의 온로드 함수의 주석을 풀면 됩니다
function rollong(num) 함수 설명
- 함수 호출시 매개 변수가 없습니다
if(!num)num=1; //초기에 돌려줄 값
- 매개 변수가 없으니 매개 변수로 쓸 넘버 값을 지정합니다 넘버 값은 여러개의 롤링 클론들의 아이디를 호출할 때 씁니다
- 매개 변수가 없으니 매개 변수로 쓸 넘버 값을 지정합니다 넘버 값은 여러개의 롤링 클론들의 아이디를 호출할 때 씁니다
( 아이디 값 msg1 , msg2 ~ msg10 )
//객체가 없다면 초기값으로 돌림
if(!$("msg"+num)){
num=1;
//clearTimeout(tH); 더 이상 돌리지 않을때 사용
}
- 위에서 지정한 초기에 돌려줄 값에 의해 롤링이 시작되고 주어진 갯수만큼 다하고 나면 더이상 진행을 하지 않거나
또는 처음으로 되돌려 1번부터 롤링을 시켜야 하는데 그 때 쓰는 초기화 입니다
// 재귀함수 호출
var tH;
tH=setTimeout(function () { rolling(num); },1);
- 재귀함수를 사용해서 롤링 함수를 정해진 시간 이내에 계속적으로 호출합니다
if($("msg"+num)){ //객체가 존재한다면
//객체를 위로 이동
$("msg"+num).style.top=$("msg"+num).offsetTop-1+"px";
$("clon_msg"+num).style.top=$("clon_msg"+num).offsetTop-1+"px";
- 롤링과 클론을 재귀 함수 호출로 인해 1픽셀씩 위로 올립니다
if($("msg"+num).offsetTop<=-$("msg"+num).offsetHeight){
- 롤링의 위로 올라간 현재 위치가 롤링의 크기보다 벗어나면 ( 앞에 마이너스가 붙었습니다 ) 롤링과 클론의 높이를
원점으로 돌림 롤링은 0으로 클론은 롤링 아래로 (롤링과 클론의 높이가 같으므로 자신의 높이만큼 밑으로 낮춰줬음 )
$("msg"+num).style.top = 0+"px";
$("clon_msg"+num).style.top = parseInt($("clon_msg"+num).offsetHeight)+"px";
clearTimeout(tH);
- 위치를 원점으로 돌린 후 함수 종료
// 다음에 움직일 값을 지정
num=parseInt(num)+1;
- 다음번을 실행하기 위해서 넘버값을 1 추가해줌
tH=setTimeout(function () { rolling(num); },3000);
tH=setTimeout(function () { rolling(num); },3000);
- 다음번 재귀함수 호출 1번이 끝나면 2번을 2번이 끝나면 3번을 계속해서 10번까지 호출
}
}
댓글 4
-
예뜨락
2013.12.05 18:51
처음 달린 댓글이네요 :)
-
훝어봤는데 어렵네요..
-
예뜨락
2013.12.31 20:21
쉽게 풀어 쓴다고 쓴건데 ^^;
복사본을 밑에 만들어두고 본문이 올라가면 밑에서 클론이 올라와 빈자리를 채우고 그러고 나면 다음것 진행 형식입니다
감사합니다!