사용상 변경의 여지는 충분히 있습니다..
소스가 간단하니.. 크게 설명은 필요없을듯 하네요.
---------------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에서 이동 됨]
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1730 | 17년 전 | 1179 | ||
| 1729 | 17년 전 | 1595 | ||
| 1728 | 17년 전 | 1668 | ||
| 1727 | 17년 전 | 1811 | ||
| 1726 | 17년 전 | 2946 | ||
| 1725 | 17년 전 | 2082 | ||
| 1724 |
|
17년 전 | 1766 | |
| 1723 |
끝없는사랑
|
17년 전 | 2100 | |
| 1722 |
끝없는사랑
|
17년 전 | 1806 | |
| 1721 | 17년 전 | 3340 | ||
| 1720 | 17년 전 | 1523 | ||
| 1719 | 17년 전 | 1645 | ||
| 1718 |
사랑합니다
|
17년 전 | 1362 | |
| 1717 | 17년 전 | 2178 | ||
| 1716 | 17년 전 | 3132 | ||
| 1715 |
|
17년 전 | 2270 | |
| 1714 |
|
17년 전 | 1726 | |
| 1713 | 17년 전 | 2974 | ||
| 1712 | 17년 전 | 4419 | ||
| 1711 | 17년 전 | 1735 | ||
| 1710 | 17년 전 | 3235 | ||
| 1709 |
jeans
|
17년 전 | 1562 | |
| 1708 |
 mando |
17년 전 | 3473 | |
| 1707 | 17년 전 | 5835 | ||
| 1706 |
|
17년 전 | 1413 | |
| 1705 |
|
17년 전 | 2151 | |
| 1704 | 17년 전 | 1785 | ||
| 1703 |
심심맨닷컴
|
17년 전 | 1525 | |
| 1702 | 17년 전 | 2413 | ||
| 1701 |
|
17년 전 | 2616 | |
| 1700 | 17년 전 | 1592 | ||
| 1699 | 17년 전 | 2678 | ||
| 1698 |
RedRiverFisher
|
17년 전 | 3163 | |
| 1697 |
심심맨닷컴
|
17년 전 | 1517 | |
| 1696 |
eclub
|
17년 전 | 1932 | |
| 1695 | 17년 전 | 3839 | ||
| 1694 |
깜장고무신
|
17년 전 | 4474 | |
| 1693 |
stuartkim
|
17년 전 | 1868 | |
| 1692 |
stuartkim
|
17년 전 | 1721 | |
| 1691 |
 hanpedro |
17년 전 | 2660 | |
| 1690 | 17년 전 | 1841 | ||
| 1689 | 17년 전 | 3927 | ||
| 1688 | 17년 전 | 1634 | ||
| 1687 | 16년 전 | 1919 | ||
| 1686 |
hanpedro |
17년 전 | 2253 | |
| 1685 | 17년 전 | 2103 | ||
| 1684 |
 cmpanel |
17년 전 | 3563 | |
| 1683 |
leeLook
|
17년 전 | 1581 | |
| 1682 | 17년 전 | 2651 | ||
| 1681 | 17년 전 | 1631 | ||
| 1680 | 17년 전 | 1900 | ||
| 1679 | 17년 전 | 7417 | ||
| 1678 | 17년 전 | 1993 | ||
| 1677 | 17년 전 | 4084 | ||
| 1676 | 17년 전 | 2414 | ||
| 1675 | 17년 전 | 2423 | ||
| 1674 | 17년 전 | 2143 | ||
| 1673 | 17년 전 | 2195 | ||
| 1672 | 17년 전 | 2616 | ||
| 1671 | 17년 전 | 3209 | ||
| 1670 | 17년 전 | 5319 | ||
| 1669 |
플래시007
|
17년 전 | 2770 | |
| 1668 |
cmpanel |
17년 전 | 2691 | |
| 1667 | 17년 전 | 2543 | ||
| 1666 |
|
17년 전 | 1789 | |
| 1665 | 17년 전 | 2196 | ||
| 1664 | 17년 전 | 5300 | ||
| 1663 |
cmpanel |
17년 전 | 3013 | |
| 1662 |
cmpanel |
17년 전 | 2577 | |
| 1661 |
cmpanel |
17년 전 | 3249 | |
| 1660 |
cmpanel |
17년 전 | 2464 | |
| 1659 |
cmpanel |
17년 전 | 2825 | |
| 1658 | 17년 전 | 5865 | ||
| 1657 | 17년 전 | 2623 | ||
| 1656 |
Piece
|
17년 전 | 2017 | |
| 1655 |
|
17년 전 | 2646 | |
| 1654 | 17년 전 | 1474 | ||
| 1653 | 17년 전 | 9792 | ||
| 1652 | 17년 전 | 4447 | ||
| 1651 | 17년 전 | 3280 | ||
| 1650 | 17년 전 | 1805 | ||
| 1649 | 17년 전 | 3598 | ||
| 1648 | 17년 전 | 2278 | ||
| 1647 | 17년 전 | 3725 | ||
| 1646 | 17년 전 | 5173 | ||
| 1645 | 17년 전 | 3824 | ||
| 1644 | 17년 전 | 2668 | ||
| 1643 | 17년 전 | 2932 | ||
| 1642 | 17년 전 | 2441 | ||
| 1641 | 17년 전 | 2777 | ||
| 1640 |
porgy
|
17년 전 | 1895 | |
| 1639 | 17년 전 | 3433 | ||
| 1638 |
컴퓨터기술자
|
17년 전 | 2134 | |
| 1637 |
 FreeMax |
17년 전 | 2256 | |
| 1636 | 17년 전 | 2072 | ||
| 1635 | 17년 전 | 3042 | ||
| 1634 |
귀여운현호
|
17년 전 | 1990 | |
| 1633 |
태양의서쪽
|
17년 전 | 2661 | |
| 1632 | 17년 전 | 3863 | ||
| 1631 | 17년 전 | 4562 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기