'대도루피'에 해당되는 글 2건
- 2008/06/03 설사병으로 고생중... (1)
- 2008/05/21 글(컨텐츠) 이 위로 스크롤 되는 롤링 div 만들기
지난 토요일, 친구들과 대박집(대패 삼겹살 1800원 하는 집) 에서 고기를 먹고,
곱창 먹고 집에 왔습니다. 물론 소주고 같이 마시긴 했지만, 개인적으로 심하게 마신 것 같지는 않은데,
다음날 아침부터 설사병이 났네요.. 아, 집에 와서 지포 한마리 구워먹고, 콜라 500ml 마시기도 했지만요.
이거,, 하루종일 계속 싸는데 죽을 것 같습니다. 똥꼬가 쓰라려요 ㅋ
아 이거 심각한데 웃기면 안되는건데 -_-;;
일요일 낮에 계속 그래서 저녁에 약사먹었는데 차도가 없네요.
일요일 저녁과, 월요일 아침은 죽, 점심은 김밥, 저녁은 죽.. 이렇게 먹었고요,
지금은 무서워서 아무것도 먹기가 싫어요 -_-
평소 같으면 배고파서 꼬르륵 거릴텐데, 위가 이상이 생긴건지 전혀 안그러네요.
원인이, 삼겹살 먹을때 안 익은 고기 하나 먹어서 그런건지, 곱창 탄거 먹어서 그런건지.. 모르겠네요.
곱창은 돼지곱창 이었어요. 소곱창은 비싸서 안먹어요.
어제 약 다시 사서 먹긴 하는데, 빨리 나았으면 좋겠군요.
설사병으로 고생하시는 분들 힘내세요 ^^
곱창 먹고 집에 왔습니다. 물론 소주고 같이 마시긴 했지만, 개인적으로 심하게 마신 것 같지는 않은데,
다음날 아침부터 설사병이 났네요.. 아, 집에 와서 지포 한마리 구워먹고, 콜라 500ml 마시기도 했지만요.
이거,, 하루종일 계속 싸는데 죽을 것 같습니다. 똥꼬가 쓰라려요 ㅋ
아 이거 심각한데 웃기면 안되는건데 -_-;;
일요일 낮에 계속 그래서 저녁에 약사먹었는데 차도가 없네요.
일요일 저녁과, 월요일 아침은 죽, 점심은 김밥, 저녁은 죽.. 이렇게 먹었고요,
지금은 무서워서 아무것도 먹기가 싫어요 -_-
평소 같으면 배고파서 꼬르륵 거릴텐데, 위가 이상이 생긴건지 전혀 안그러네요.
원인이, 삼겹살 먹을때 안 익은 고기 하나 먹어서 그런건지, 곱창 탄거 먹어서 그런건지.. 모르겠네요.
곱창은 돼지곱창 이었어요. 소곱창은 비싸서 안먹어요.
어제 약 다시 사서 먹긴 하는데, 빨리 나았으면 좋겠군요.
설사병으로 고생하시는 분들 힘내세요 ^^
이올린에 북마크하기
이올린에 추천하기'4차원여행기' 카테고리의 다른 글
| 인터넷에 대해 얘기하는 이명박. (0) | 2008/06/17 |
|---|---|
| [잡담] 인생에 있어 중요한 것...1 (1) | 2008/06/16 |
| 설사병으로 고생중... (1) | 2008/06/03 |
안녕하세요, 대도루피 입니다.
제대로된 첫 강좌 이려나요.
강좌를 작성하는 목적은, 제 자신이 잊어버릴 수도 있는 부분이라 기록하기 위함과 동시에,
같은 기능을 필요로 하시는 분께서 쉽게 사용하시라고 만든거고요..
최적화 까지는 아니더라도, 사용하기 쉽고 알아보기 쉽게 작성하였습니다. ^^
설명은, 소스로 대체할게요 ^^
소스는 펌이 아닌, 직접 작성한 내용들입니다.
간략한 설명을 하자면, 가장 밑에 makeContent() 부분이 출력할 데이터 목록을 만드는 부분인데요.
contentArray 라는 array 변수를 생성해 두었는데, getData(); 부분은 php함수를 호출해서
DB로 부터 데이터를 읽어 contentArray[0] 번부터 시작해서 원하는 숫자 만큼 데이터를 입력받으시면 됩니다.
초급 프로그래머 이시면, 충분히 하실 수 있겠죠..?
해당 작업을 makeContent() 에서 처리하시고요,, 홈페이지 내에서 롤링을 추가하시고 싶은 위치에서
makeContent() 함수를 호출하시면 되요.
그다음, status() 함수를 연이어 호출 하시면, 롤링의 작동이 시작됩니다.
변수는 start와 end 가 있는데 start는 0 적어주시면 되고, end는 출력하실 갯수(DB에서 읽어온 아이템 갯수)
에서 1을 뺀 값을 입력하시면 되겠죠? 0번부터 시작이니까요.
그리고 status() 함수느 rolling() 함수 내에 setTimeout 함수가 있는데 적혀있는 숫자 1000은 대기시간이에요.
ms(밀리세컨드) 로 계산합니다. 1000이면 1초가 되겠죠? ^^
시간 길게 하고 싶으시면 바꿔주시면 되고요.. 그다음 호출하는건 10ms 로 호출하면서
div의 top 을 -1 씩 빼서 위로 스크롤 되는 효과를 만들어 줍니다...
응용하시면, 처음에는 빠르다가 점점 느려지는 작업도 가능하겠죠? 그부분은 알아서....^^;;
그리고 정말 중요한 부분!
빨간 색으로 표시한 innerBox 는요,, 다른 명령어나 그런게 아니고요,
html 내부의 div 의 id값 입니다. getElementById 로.. 해당 객체를 가져오죠..?
그래서 컨트롤 가능한거에요..
innerBox의 div 스타일은 꼭 absolute 혹은 relative 등으로 설정해주세요...
그래야 top 스타일 값을 사용할 수 있거든요.
위는 본문의 div구조인데요.. 스타일 시트를 보시면 이해가 되시려나요..
innerBox를 감싸고 있는 외부인 box를 overflow: hidden 시켜주세요..
가로 세로 크기는 지정해주시고요.. 그래야, 감춰지겠죠? ^^
잘 사용하시고요,
버젼 업 되면 다시 포스팅 할게요 ^^
제대로된 첫 강좌 이려나요.
강좌를 작성하는 목적은, 제 자신이 잊어버릴 수도 있는 부분이라 기록하기 위함과 동시에,
같은 기능을 필요로 하시는 분께서 쉽게 사용하시라고 만든거고요..
최적화 까지는 아니더라도, 사용하기 쉽고 알아보기 쉽게 작성하였습니다. ^^
설명은, 소스로 대체할게요 ^^
소스는 펌이 아닌, 직접 작성한 내용들입니다.
<script language="Javascript">
<!--
var y=0; //y축 좌표
var count=0; //y축 증가값 리셋
var contentArray = new Array(); //컨텐츠 내용 배열
var start=0; //0번부터
var end=9; //9번 까지 총 10개의 컨텐츠
var now=0; //현재 추가하는 번호
var newDiv;
var hover=1; //마우스 오버시 0이면 멈춤
var oTime;
function addContent() { //컨텐츠 2개 추가
if(now >= end) now=0;
var dom = document.getElementById("innerBox");
newDiv = document.createElement("div");
newDiv.style.height = "100px";
<!--
var y=0; //y축 좌표
var count=0; //y축 증가값 리셋
var contentArray = new Array(); //컨텐츠 내용 배열
var start=0; //0번부터
var end=9; //9번 까지 총 10개의 컨텐츠
var now=0; //현재 추가하는 번호
var newDiv;
var hover=1; //마우스 오버시 0이면 멈춤
var oTime;
function addContent() { //컨텐츠 2개 추가
if(now >= end) now=0;
var dom = document.getElementById("innerBox");
newDiv = document.createElement("div");
newDiv.style.height = "100px";
var sub1 = document.createElement("div");
sub1.style.paddingBottom = "5px";
sub1.innerHTML = contentArray[now];
now++;
var sub2 = document.createElement("div");
sub2.innerHTML = contentArray[now];
now++;
sub1.style.paddingBottom = "5px";
sub1.innerHTML = contentArray[now];
now++;
var sub2 = document.createElement("div");
sub2.innerHTML = contentArray[now];
now++;
newDiv.appendChild(sub1);
newDiv.appendChild(sub2);
dom.appendChild(newDiv);
}
function status() { //롤링 처음 실행시에만 호출
addContent();
addContent();
setTimeout("run()",1000);
}
function run() { //롤링 반복 작업
oTime = setInterval("rolling()",10);
}
function rolling() {
if(hover==1) {
y-=1;
count+=1;
var dom = document.getElementById("innerBox");
dom.style.top= y + "px";
if(count==100) { //롤링을 멈추고 기다림
count=0;
addContent();
clearInterval(oTime); //롤링 멈춤
setTimeout("run()",1000); // 1초후 다시 롤링 시작
} else {
//oTime = setTimeout("rolling()",10);
}
}
}
function makeContent() {
<? getData(); ?>
}
-->
</script>
newDiv.appendChild(sub2);
dom.appendChild(newDiv);
}
function status() { //롤링 처음 실행시에만 호출
addContent();
addContent();
setTimeout("run()",1000);
}
function run() { //롤링 반복 작업
oTime = setInterval("rolling()",10);
}
function rolling() {
if(hover==1) {
y-=1;
count+=1;
var dom = document.getElementById("innerBox");
dom.style.top= y + "px";
if(count==100) { //롤링을 멈추고 기다림
count=0;
addContent();
clearInterval(oTime); //롤링 멈춤
setTimeout("run()",1000); // 1초후 다시 롤링 시작
} else {
//oTime = setTimeout("rolling()",10);
}
}
}
function makeContent() {
<? getData(); ?>
}
-->
</script>
간략한 설명을 하자면, 가장 밑에 makeContent() 부분이 출력할 데이터 목록을 만드는 부분인데요.
contentArray 라는 array 변수를 생성해 두었는데, getData(); 부분은 php함수를 호출해서
DB로 부터 데이터를 읽어 contentArray[0] 번부터 시작해서 원하는 숫자 만큼 데이터를 입력받으시면 됩니다.
초급 프로그래머 이시면, 충분히 하실 수 있겠죠..?
해당 작업을 makeContent() 에서 처리하시고요,, 홈페이지 내에서 롤링을 추가하시고 싶은 위치에서
makeContent() 함수를 호출하시면 되요.
그다음, status() 함수를 연이어 호출 하시면, 롤링의 작동이 시작됩니다.
변수는 start와 end 가 있는데 start는 0 적어주시면 되고, end는 출력하실 갯수(DB에서 읽어온 아이템 갯수)
에서 1을 뺀 값을 입력하시면 되겠죠? 0번부터 시작이니까요.
그리고 status() 함수느 rolling() 함수 내에 setTimeout 함수가 있는데 적혀있는 숫자 1000은 대기시간이에요.
ms(밀리세컨드) 로 계산합니다. 1000이면 1초가 되겠죠? ^^
시간 길게 하고 싶으시면 바꿔주시면 되고요.. 그다음 호출하는건 10ms 로 호출하면서
div의 top 을 -1 씩 빼서 위로 스크롤 되는 효과를 만들어 줍니다...
응용하시면, 처음에는 빠르다가 점점 느려지는 작업도 가능하겠죠? 그부분은 알아서....^^;;
그리고 정말 중요한 부분!
빨간 색으로 표시한 innerBox 는요,, 다른 명령어나 그런게 아니고요,
html 내부의 div 의 id값 입니다. getElementById 로.. 해당 객체를 가져오죠..?
그래서 컨트롤 가능한거에요..
innerBox의 div 스타일은 꼭 absolute 혹은 relative 등으로 설정해주세요...
그래야 top 스타일 값을 사용할 수 있거든요.
<div id="content">
<div id="box">
<div id="innerBox" onMouseOver = "hover=0;" onMouseOut = "hover=1;">
<script language="javascript">
makeContent();
status();
</script>
</div>
</div>
</div>
<div id="box">
<div id="innerBox" onMouseOver = "hover=0;" onMouseOut = "hover=1;">
<script language="javascript">
makeContent();
status();
</script>
</div>
</div>
</div>
위는 본문의 div구조인데요.. 스타일 시트를 보시면 이해가 되시려나요..
<style type="text/css">
* { font-face:굴림; font-size:9pt }
ol { list-style:none;margin:0; }
img,div { margin:0;padding:0;border:0 }
a:link,a:visited,a:hover { text-decoration:none; color:#000; }
#content { width:187px;height:115px;position:relative;top:-4px;
background-image:url("사진 url");
background-repeat:no-repeat;
}
#box { width:187px;height:100px; position:relative;
padding-left:10px; padding-bottom:30px;overflow:hidden;
}
#innerBox { width:187px;height:100px; position:absolute; top:0px}
ol.data { height:100px; }
</style>
* { font-face:굴림; font-size:9pt }
ol { list-style:none;margin:0; }
img,div { margin:0;padding:0;border:0 }
a:link,a:visited,a:hover { text-decoration:none; color:#000; }
#content { width:187px;height:115px;position:relative;top:-4px;
background-image:url("사진 url");
background-repeat:no-repeat;
}
#box { width:187px;height:100px; position:relative;
padding-left:10px; padding-bottom:30px;overflow:hidden;
}
#innerBox { width:187px;height:100px; position:absolute; top:0px}
ol.data { height:100px; }
</style>
innerBox를 감싸고 있는 외부인 box를 overflow: hidden 시켜주세요..
가로 세로 크기는 지정해주시고요.. 그래야, 감춰지겠죠? ^^
잘 사용하시고요,
버젼 업 되면 다시 포스팅 할게요 ^^
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 글(컨텐츠) 이 위로 스크롤 되는 롤링 div 만들기 (0) | 2008/05/21 |
|---|
Prev
Rss Feed