간단한 텍스트 스크롤
사용상 변경의 여지는 충분히 있습니다..
소스가 간단하니.. 크게 설명은 필요없을듯 하네요.
---------------x8 cut here ---------------------------------------
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
div {font-size:9pt;}
div.board_cls {
border: 1px solid gray;
/* text-align: center; */
overflow: hidden; /* 이 부분을 주석처리해서 흐름을 본다 */
}
div.sign_cls {
border: 0px solid red;
padding-left:10px;
}
</style>
<script type="text/javascript">
<!--
var timerID = {} ;
var arrIdx = 0;
var msgs = [
["http://www.wikipedia.org", "_blank", "wikipedia 가기"],
["http://www.netcraft.com/", "_blank", "netcraft 가기"],
["http://www.python.org", "_blank", "python 가기"],
["http://www.php.net", "_blank", "php 가기"],
["http://www.eidf.org", "_blank", "eidf 가기"],
["", "", "그냥 텍스트"]
];
function makeSign(arr) {
if (arr.length) {
if (arr[0] != "") {
return "<a href='"+ arr[0] +"' target='"+ arr[1] +"'>"+ arr[2] +"</a>";
}
else {
return arr[2];
}
}
}
//board 껍데기
function initBoard(boardID, posX, posY) {
var board = document.getElementById(boardID);
var bstyle = board.style;
// sign position
bstyle.position="absolute";
bstyle.top = posY; // "150px";
bstyle.left = posX ; //"150px";
// sign size
bstyle.height = "15pt";
bstyle.width = "200pt";
}
// text (높이값을 적당히 셋팅해야 한다. 아래 줄이 짤리지 않게.)
function initSign(signID, boardID) {
var board = document.getElementById(boardID);
var sign = document.getElementById(signID);
sstyle = sign.style;
sstyle.position = "relative";
sstyle.top = parseInt(board.style.height) ;
sstyle.width = board.style.width;
sstyle.height = board.style.height;
}
function upwardSign(boardID, signID) {
var board = document.getElementById(boardID);
var sign = document.getElementById(signID);
sign.style.top = parseInt(sign.style.top) - 1; // 이동 범위 -픽셀(이것을 2이상으로 할 경우 머무는 자리의 숫자에 영향
if (parseInt(sign.style.top) * -1 > parseInt(sign.style.height)) {
arrIdx = arrIdx + 1;
initSign(signID, boardID);
sign.innerHTML = makeSign(msgs[arrIdx%msgs.length]);
}
if (parseInt(sign.style.top) == 3) { // 상단에서 숫자만큼의 픽셀 아래에 머물다.
clearTimeout(timerID[boardID]);
timerID[boardID] = setTimeout("upwardSign('"+ boardID + "', '"+ signID +"')", 1000); // 1초간 머뭄
//timerID[boardID] = setTimeout("upwardSign('"+ boardID + "', '"+ signID +"')", 1000 + (Math.random() * 1000)); // 1 - 2초간 머뭄
}
else {
timerID[boardID] = setTimeout("upwardSign('"+ boardID + "', '"+ signID +"')", 50); // 이동 속도 (0.05초)
}
}
function scroll(boardID, signID, posX, posY) {
var board = document.getElementById(boardID);
var sign = document.getElementById(signID);
initBoard(boardID, posX, posY);
initSign(signID, boardID);
sign.innerHTML = makeSign(msgs[arrIdx%msgs.length]);
upwardSign(boardID, signID);
}
//-->
</script>
</head>
<body onload="scroll('board', 'sign', 50, 100); scroll('board2', 'sign2', 50, 125); scroll('board3', 'sign3', 50, 150);">
현재는 메세지를 공유하기 때문에 하나씩 건너서 보여진다.<br />
<div class="board_cls" id="board">
<div class="sign_cls" id="sign" onMouseOver="clearTimeout(timerID['board'])" onMouseOut="upwardSign('board', 'sign')">11</div>
</div>
<div class="board_cls" id="board2">
<div class="sign_cls" id="sign2" onMouseOver="clearTimeout(timerID['board2'])" onMouseOut="upwardSign('board2', 'sign2')">22</div>
</div>
<div class="board_cls" id="board3">
<div class="sign_cls" id="sign3" onMouseOver="clearTimeout(timerID['board3'])" onMouseOut="upwardSign('board3', 'sign3')">33</div>
</div>
</body>
</html>
소스가 간단하니.. 크게 설명은 필요없을듯 하네요.
---------------x8 cut here ---------------------------------------
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
div {font-size:9pt;}
div.board_cls {
border: 1px solid gray;
/* text-align: center; */
overflow: hidden; /* 이 부분을 주석처리해서 흐름을 본다 */
}
div.sign_cls {
border: 0px solid red;
padding-left:10px;
}
</style>
<script type="text/javascript">
<!--
var timerID = {} ;
var arrIdx = 0;
var msgs = [
["http://www.wikipedia.org", "_blank", "wikipedia 가기"],
["http://www.netcraft.com/", "_blank", "netcraft 가기"],
["http://www.python.org", "_blank", "python 가기"],
["http://www.php.net", "_blank", "php 가기"],
["http://www.eidf.org", "_blank", "eidf 가기"],
["", "", "그냥 텍스트"]
];
function makeSign(arr) {
if (arr.length) {
if (arr[0] != "") {
return "<a href='"+ arr[0] +"' target='"+ arr[1] +"'>"+ arr[2] +"</a>";
}
else {
return arr[2];
}
}
}
//board 껍데기
function initBoard(boardID, posX, posY) {
var board = document.getElementById(boardID);
var bstyle = board.style;
// sign position
bstyle.position="absolute";
bstyle.top = posY; // "150px";
bstyle.left = posX ; //"150px";
// sign size
bstyle.height = "15pt";
bstyle.width = "200pt";
}
// text (높이값을 적당히 셋팅해야 한다. 아래 줄이 짤리지 않게.)
function initSign(signID, boardID) {
var board = document.getElementById(boardID);
var sign = document.getElementById(signID);
sstyle = sign.style;
sstyle.position = "relative";
sstyle.top = parseInt(board.style.height) ;
sstyle.width = board.style.width;
sstyle.height = board.style.height;
}
function upwardSign(boardID, signID) {
var board = document.getElementById(boardID);
var sign = document.getElementById(signID);
sign.style.top = parseInt(sign.style.top) - 1; // 이동 범위 -픽셀(이것을 2이상으로 할 경우 머무는 자리의 숫자에 영향
if (parseInt(sign.style.top) * -1 > parseInt(sign.style.height)) {
arrIdx = arrIdx + 1;
initSign(signID, boardID);
sign.innerHTML = makeSign(msgs[arrIdx%msgs.length]);
}
if (parseInt(sign.style.top) == 3) { // 상단에서 숫자만큼의 픽셀 아래에 머물다.
clearTimeout(timerID[boardID]);
timerID[boardID] = setTimeout("upwardSign('"+ boardID + "', '"+ signID +"')", 1000); // 1초간 머뭄
//timerID[boardID] = setTimeout("upwardSign('"+ boardID + "', '"+ signID +"')", 1000 + (Math.random() * 1000)); // 1 - 2초간 머뭄
}
else {
timerID[boardID] = setTimeout("upwardSign('"+ boardID + "', '"+ signID +"')", 50); // 이동 속도 (0.05초)
}
}
function scroll(boardID, signID, posX, posY) {
var board = document.getElementById(boardID);
var sign = document.getElementById(signID);
initBoard(boardID, posX, posY);
initSign(signID, boardID);
sign.innerHTML = makeSign(msgs[arrIdx%msgs.length]);
upwardSign(boardID, signID);
}
//-->
</script>
</head>
<body onload="scroll('board', 'sign', 50, 100); scroll('board2', 'sign2', 50, 125); scroll('board3', 'sign3', 50, 150);">
현재는 메세지를 공유하기 때문에 하나씩 건너서 보여진다.<br />
<div class="board_cls" id="board">
<div class="sign_cls" id="sign" onMouseOver="clearTimeout(timerID['board'])" onMouseOut="upwardSign('board', 'sign')">11</div>
</div>
<div class="board_cls" id="board2">
<div class="sign_cls" id="sign2" onMouseOver="clearTimeout(timerID['board2'])" onMouseOut="upwardSign('board2', 'sign2')">22</div>
</div>
<div class="board_cls" id="board3">
<div class="sign_cls" id="sign3" onMouseOver="clearTimeout(timerID['board3'])" onMouseOut="upwardSign('board3', 'sign3')">33</div>
</div>
</body>
</html>
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
게시글 목록
| 번호 | 제목 |
|---|---|
| 12651 | |
| 12650 |
JavaScript
query 문자열 최대 길이
|
| 12646 |
JavaScript
이미지 슬라이드 소스입니다(Ajax)
3
|
| 141 | |
| 140 | |
| 138 | |
| 137 | |
| 131 | |
| 130 | |
| 25048 | |
| 12644 | |
| 125 | |
| 122 | |
| 12641 | |
| 12635 |
JavaScript
네비게이션 소스
5
|
| 12632 | |
| 29350 | |
| 12629 |
Linux
서버 관리자라면 요런것도~
2
|
| 29349 | |
| 12628 |
JavaScript
테이블,컬럼 comments (정보관리테이블만들기)
|
| 29348 | |
| 12627 |
MySQL
mysql 연결
|
| 12626 | |
| 12623 |
JavaScript
시간별이미지출력 이것좀봐주세요!~~
2
|
| 25047 | |
| 25045 | |
| 25041 | |
| 25040 | |
| 25038 | |
| 25037 | |
| 117 | |
| 25036 | |
| 12620 | |
| 12618 | |
| 12617 | |
| 12614 |
기타
캐쉬백메뉴
2
|
| 12612 |
JavaScript
배열을이용한이동
1
|
| 12608 |
JavaScript
3dMax를이용한메뉴
3
|
| 12606 |
기타
눈동자
1
|
| 12605 |
기타
눈내리는효과
|
| 29347 |
HTML
심장박동효과
|
| 12604 |
JavaScript
곰장어
|
| 12597 | |
| 12595 |
MySQL
MySQL 형변환 함수
1
|
| 12594 |
MySQL
Mysql 백업 팁
|
| 12593 | |
| 12589 | |
| 12585 | |
| 29346 |
HTML
외부 문서 불러오기
|
| 12584 | |
| 12582 | |
| 12581 | |
| 12580 |
JavaScript
윈도우2003 + Apache 를 위한 SSL 보안서버 구축 팁
|
| 12578 |
JavaScript
AJAX 소스제공 사이트들 입니다.
1
|
| 12576 |
MySQL
쿼리속도 향상과 효율적인 게시판 쿼리
1
|
| 29345 | |
| 12575 |
JavaScript
ORACLE_CATALOG
|
| 12574 | |
| 12573 | |
| 29344 |
HTML
오라클 SQL 기본 간단 정리
|
| 115 | |
| 12572 | |
| 12570 | |
| 29343 |
HTML
레이어를 클릭하면 순서가 바뀌는거에요
|
| 29342 |
HTML
셀렉트 박스 내용을 레이어로 표현
|
| 12569 |
JavaScript
다모임 - 플레이어 입니다(wmv)
|
| 12567 |
JavaScript
디렉토리서비스 소스 입니다.
1
|
| 29337 |
JavaScript
구인 구직 사이트 소스에요~
4
|
| 12566 |
JavaScript
설문조사 소스입니다. 참고하세요.
|
| 12564 |
JavaScript
ASP - FSO 객체 정리한 파일입니다. 많은 도움이 될거에요~
1
|
| 112 | |
| 107 | |
| 104 | |
| 101 | |
| 96 | |
| 94 | |
| 93 | |
| 12563 | |
| 12559 | |
| 88 | |
| 85 | |
| 12558 | |
| 29336 | |
| 29333 |
HTML
버튼소리나는메뉴
2
|
| 84 | |
| 29329 |
HTML
초보자를 위한 포토샵 강좌 63
3
|
| 12556 | |
| 29327 |
HTML
초보자를 위한 포토샵 강좌 61
1
|
| 12554 | |
| 12552 | |
| 12549 | |
| 12545 | |
| 12544 | |
| 29325 |
HTML
초보자를 위한 포토샵 강좌 55
1
|
| 12542 | |
| 12541 | |
| 29324 |
HTML
초보자를 위한 포토샵 강좌 52
|
| 12540 |
JavaScript
초보자를 위한 포토샵 강좌 51
|
| 12539 | |
| 12538 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기