사용상 변경의 여지는 충분히 있습니다..
소스가 간단하니.. 크게 설명은 필요없을듯 하네요.
---------------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에서 이동 됨]
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2230 | 16년 전 | 1289 | ||
| 2229 | 16년 전 | 2161 | ||
| 2228 | 16년 전 | 3222 | ||
| 2227 | 16년 전 | 2166 | ||
| 2226 | 16년 전 | 1752 | ||
| 2225 | 16년 전 | 1510 | ||
| 2224 |
 ideaman |
16년 전 | 2044 | |
| 2223 | 16년 전 | 4730 | ||
| 2222 | 16년 전 | 1408 | ||
| 2221 |
 RINIX |
16년 전 | 2143 | |
| 2220 |
RINIX |
16년 전 | 2132 | |
| 2219 |
RINIX |
16년 전 | 2403 | |
| 2218 |
RINIX |
16년 전 | 2145 | |
| 2217 |
RINIX |
16년 전 | 4439 | |
| 2216 |
RINIX |
16년 전 | 2924 | |
| 2215 | 16년 전 | 2863 | ||
| 2214 | 16년 전 | 1595 | ||
| 2213 | 16년 전 | 1241 | ||
| 2212 |
RINIX |
16년 전 | 3942 | |
| 2211 |
RINIX |
16년 전 | 1615 | |
| 2210 |
RINIX |
16년 전 | 1605 | |
| 2209 | 16년 전 | 2108 | ||
| 2208 | 16년 전 | 1883 | ||
| 2207 |
letsgolee
|
16년 전 | 1490 | |
| 2206 |
RINIX |
16년 전 | 3915 | |
| 2205 | 16년 전 | 1758 | ||
| 2204 | 16년 전 | 3136 | ||
| 2203 | 16년 전 | 3022 | ||
| 2202 | 16년 전 | 1043 | ||
| 2201 | 16년 전 | 1844 | ||
| 2200 | 16년 전 | 1591 | ||
| 2199 |
 MindMap |
16년 전 | 1849 | |
| 2198 |
태양의서쪽
|
16년 전 | 2641 | |
| 2197 |
태양의서쪽
|
16년 전 | 3023 | |
| 2196 |
태양의서쪽
|
16년 전 | 3222 | |
| 2195 | 16년 전 | 3327 | ||
| 2194 | 16년 전 | 1464 | ||
| 2193 |
letsgolee
|
16년 전 | 1420 | |
| 2192 | 16년 전 | 2257 | ||
| 2191 | 16년 전 | 1976 | ||
| 2190 |
 cmpanel |
16년 전 | 2288 | |
| 2189 | 16년 전 | 2809 | ||
| 2188 |
Sizkein
|
16년 전 | 3260 | |
| 2187 |
letsgolee
|
16년 전 | 2357 | |
| 2186 |
Sizkein
|
16년 전 | 1634 | |
| 2185 |
Sizkein
|
16년 전 | 3208 | |
| 2184 |
Sizkein
|
16년 전 | 3061 | |
| 2183 | 16년 전 | 3040 | ||
| 2182 | 16년 전 | 3910 | ||
| 2181 | 16년 전 | 2581 | ||
| 2180 |
 skinartisanCOM |
16년 전 | 2402 | |
| 2179 | 17년 전 | 2653 | ||
| 2178 | 17년 전 | 2897 | ||
| 2177 | 17년 전 | 2615 | ||
| 2176 | 17년 전 | 1452 | ||
| 2175 | 17년 전 | 1894 | ||
| 2174 | 17년 전 | 1488 | ||
| 2173 |
skinartisanCOM |
17년 전 | 1913 | |
| 2172 | 17년 전 | 2508 | ||
| 2171 | 17년 전 | 8694 | ||
| 2170 | 17년 전 | 3149 | ||
| 2169 | 17년 전 | 4238 | ||
| 2168 |
cmpanel |
17년 전 | 1981 | |
| 2167 | 17년 전 | 3658 | ||
| 2166 |
cmpanel |
17년 전 | 1551 | |
| 2165 | 17년 전 | 1385 | ||
| 2164 | 17년 전 | 2324 | ||
| 2163 | 17년 전 | 1316 | ||
| 2162 | 17년 전 | 1638 | ||
| 2161 | 17년 전 | 1457 | ||
| 2160 | 17년 전 | 2529 | ||
| 2159 |
inxps
|
17년 전 | 1495 | |
| 2158 |
inxps
|
17년 전 | 1091 | |
| 2157 | 17년 전 | 1221 | ||
| 2156 | 17년 전 | 3096 | ||
| 2155 | 17년 전 | 2167 | ||
| 2154 | 17년 전 | 1973 | ||
| 2153 |
 똥싼너구리 |
17년 전 | 1221 | |
| 2152 |
letsgolee
|
17년 전 | 2454 | |
| 2151 | 17년 전 | 1170 | ||
| 2150 |
아름다운세상
|
17년 전 | 1128 | |
| 2149 |
아름다운세상
|
17년 전 | 1372 | |
| 2148 |
아름다운세상
|
17년 전 | 2735 | |
| 2147 |
 넥스트스텝 |
17년 전 | 2399 | |
| 2146 | 17년 전 | 2483 | ||
| 2145 | 17년 전 | 1186 | ||
| 2144 | 17년 전 | 1301 | ||
| 2143 | 17년 전 | 3246 | ||
| 2142 | 17년 전 | 2835 | ||
| 2141 | 17년 전 | 4109 | ||
| 2140 | 17년 전 | 2259 | ||
| 2139 | 17년 전 | 2349 | ||
| 2138 | 17년 전 | 1397 | ||
| 2137 | 17년 전 | 2515 | ||
| 2136 | 17년 전 | 2200 | ||
| 2135 | 17년 전 | 2959 | ||
| 2134 |
아름다운세상
|
17년 전 | 2468 | |
| 2133 |
Juinjang
|
17년 전 | 1629 | |
| 2132 | 17년 전 | 2430 | ||
| 2131 | 17년 전 | 1589 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기