사용상 변경의 여지는 충분히 있습니다..
소스가 간단하니.. 크게 설명은 필요없을듯 하네요.
---------------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에서 이동 됨]
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2330 | 16년 전 | 5069 | ||
| 2329 | 16년 전 | 2304 | ||
| 2328 | 16년 전 | 3404 | ||
| 2327 | 16년 전 | 2639 | ||
| 2326 | 16년 전 | 1557 | ||
| 2325 | 16년 전 | 5349 | ||
| 2324 | 16년 전 | 2470 | ||
| 2323 | 16년 전 | 5961 | ||
| 2322 | 16년 전 | 1938 | ||
| 2321 | 16년 전 | 4019 | ||
| 2320 | 16년 전 | 3030 | ||
| 2319 |
 RINIX |
16년 전 | 2210 | |
| 2318 |
데니크레인
|
16년 전 | 2232 | |
| 2317 | 16년 전 | 4411 | ||
| 2316 | 16년 전 | 3294 | ||
| 2315 | 16년 전 | 2833 | ||
| 2314 | 16년 전 | 2960 | ||
| 2313 | 16년 전 | 2076 | ||
| 2312 | 16년 전 | 1766 | ||
| 2311 | 16년 전 | 1676 | ||
| 2310 | 16년 전 | 1396 | ||
| 2309 | 16년 전 | 1666 | ||
| 2308 | 16년 전 | 1902 | ||
| 2307 | 16년 전 | 1599 | ||
| 2306 |
 heisher |
16년 전 | 4849 | |
| 2305 | 16년 전 | 3827 | ||
| 2304 | 16년 전 | 1786 | ||
| 2303 | 16년 전 | 1533 | ||
| 2302 | 16년 전 | 2268 | ||
| 2301 | 16년 전 | 4530 | ||
| 2300 | 16년 전 | 3544 | ||
| 2299 | 16년 전 | 2576 | ||
| 2298 | 16년 전 | 4335 | ||
| 2297 | 16년 전 | 3207 | ||
| 2296 | 16년 전 | 1352 | ||
| 2295 |
heisher |
16년 전 | 1378 | |
| 2294 |
heisher |
16년 전 | 2039 | |
| 2293 | 16년 전 | 1886 | ||
| 2292 | 16년 전 | 2564 | ||
| 2291 | 16년 전 | 2233 | ||
| 2290 | 16년 전 | 1371 | ||
| 2289 | 16년 전 | 4392 | ||
| 2288 | 16년 전 | 1477 | ||
| 2287 | 16년 전 | 1781 | ||
| 2286 | 16년 전 | 2199 | ||
| 2285 |
RINIX |
16년 전 | 3833 | |
| 2284 |
RINIX |
16년 전 | 2729 | |
| 2283 |
RINIX |
16년 전 | 1486 | |
| 2282 | 16년 전 | 4011 | ||
| 2281 |
 Coolpis |
16년 전 | 1397 | |
| 2280 | 16년 전 | 1578 | ||
| 2279 | 16년 전 | 1234 | ||
| 2278 | 16년 전 | 1712 | ||
| 2277 | 16년 전 | 1612 | ||
| 2276 | 16년 전 | 1625 | ||
| 2275 | 16년 전 | 1424 | ||
| 2274 | 16년 전 | 2179 | ||
| 2273 | 16년 전 | 1819 | ||
| 2272 |
RINIX |
16년 전 | 1965 | |
| 2271 | 16년 전 | 2177 | ||
| 2270 |
a1system
|
16년 전 | 1472 | |
| 2269 | 16년 전 | 2306 | ||
| 2268 | 16년 전 | 2259 | ||
| 2267 | 16년 전 | 4533 | ||
| 2266 |
 TopSchooL |
16년 전 | 1295 | |
| 2265 | 16년 전 | 1051 | ||
| 2264 |
잠자리똥꾸멍
|
16년 전 | 2009 | |
| 2263 |
태양의서쪽
|
16년 전 | 1972 | |
| 2262 |
태양의서쪽
|
16년 전 | 1516 | |
| 2261 |
태양의서쪽
|
16년 전 | 2041 | |
| 2260 |
 똥싼너구리 |
16년 전 | 2270 | |
| 2259 | 16년 전 | 1386 | ||
| 2258 | 16년 전 | 1738 | ||
| 2257 | 16년 전 | 1921 | ||
| 2256 | 16년 전 | 1013 | ||
| 2255 | 16년 전 | 1689 | ||
| 2254 | 16년 전 | 1405 | ||
| 2253 | 16년 전 | 1913 | ||
| 2252 |
freedays
|
16년 전 | 1326 | |
| 2251 | 16년 전 | 2200 | ||
| 2250 | 16년 전 | 1879 | ||
| 2249 | 16년 전 | 5866 | ||
| 2248 | 16년 전 | 1912 | ||
| 2247 | 16년 전 | 3685 | ||
| 2246 | 16년 전 | 1467 | ||
| 2245 |
RINIX |
16년 전 | 1754 | |
| 2244 |
RINIX |
16년 전 | 2070 | |
| 2243 | 16년 전 | 2609 | ||
| 2242 | 16년 전 | 2306 | ||
| 2241 | 16년 전 | 2755 | ||
| 2240 | 16년 전 | 2991 | ||
| 2239 | 16년 전 | 3016 | ||
| 2238 |
똥싼너구리 |
16년 전 | 1820 | |
| 2237 |
똥싼너구리 |
16년 전 | 1540 | |
| 2236 |
똥싼너구리 |
16년 전 | 1416 | |
| 2235 | 16년 전 | 1725 | ||
| 2234 | 16년 전 | 1205 | ||
| 2233 | 16년 전 | 1960 | ||
| 2232 |
똥싼너구리 |
16년 전 | 1731 | |
| 2231 | 16년 전 | 1606 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기