AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
A

간단한 텍스트 스크롤

자인
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2008-09-03 (수) 22:32:13 · 2670
사용상 변경의 여지는 충분히 있습니다..
소스가 간단하니.. 크게 설명은 필요없을듯 하네요.

---------------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에서 이동 됨]
#개발자팁 #개발자 #팁자료실 #javascript
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 3,911
12-08-07 조회 3,585
12-08-03 조회 3,500
12-07-31 조회 3,617
12-07-30 조회 3,574
12-07-16 조회 3,784
12-07-15 조회 3,486
12-07-07 조회 3,484
12-07-06 조회 3,594
12-07-03 조회 3,633
12-06-29 조회 3,225
12-06-22 조회 3,586
12-06-17 조회 3,703
12-05-21 조회 3,774
12-05-02 조회 3,357
12-05-02 조회 4,147
12-05-02 조회 3,260
12-04-30 조회 3,415
12-04-30 조회 3,124
12-03-17 조회 3,947
12-03-10 조회 3,338
12-03-08 조회 3,757
12-03-03 조회 3,514
12-02-27 조회 4,930
12-02-17 조회 4,279
12-02-16 조회 4,434
12-02-03 조회 3,259
12-01-31 조회 3,015
12-01-24 조회 3,077
12-01-17 조회 3,831
12-01-05 조회 3,386
11-12-30 조회 3,004
11-12-23 조회 4,616
11-12-08 조회 3,368
11-12-07 조회 4,351
11-11-27 조회 3,771
11-11-25 조회 4,104
11-11-23 조회 3,493
11-11-22 조회 3,445
11-11-09 조회 3,177
11-10-23 조회 3,078
11-10-19 조회 3,055
11-10-08 조회 2,761
11-10-04 조회 2,774
11-10-04 조회 5,216
11-09-01 조회 4,274
11-08-13 조회 2,450
11-08-06 조회 3,140
11-07-11 조회 3,537
11-06-27 조회 2,907
11-06-21 조회 2,547
11-06-13 조회 2,355
11-06-07 조회 2,368
11-05-26 조회 2,364
11-04-20 조회 2,679
11-03-21 조회 2,766
11-03-18 조회 2,462
11-03-11 조회 2,502
11-02-07 조회 2,321
11-01-18 조회 2,639
11-01-12 조회 2,363
11-01-06 조회 2,481
10-12-10 조회 2,742
10-12-09 조회 2,407
10-12-08 조회 4,992
10-11-29 조회 2,529
10-11-28 조회 2,737
10-11-28 조회 2,588
10-11-19 조회 2,774
10-11-04 조회 2,677
10-10-21 조회 2,387
10-10-19 조회 3,337
10-10-12 조회 2,660
10-10-07 조회 2,480
10-09-30 조회 3,445
10-09-17 조회 3,842
10-09-17 조회 3,808
10-05-31 조회 3,472
09-12-31 조회 3,622
09-07-23 조회 4,926
08-09-16 조회 3,172
08-09-06 조회 2,890
08-09-04 조회 3,325
08-08-16 조회 4,380
08-08-15 조회 3,250
08-08-14 조회 4,462
08-08-12 조회 3,823
08-07-23 조회 2,747
08-07-10 조회 3,688
08-07-04 조회 2,913
08-06-27 조회 7,567
08-06-19 조회 4,853
08-05-27 조회 5,468
08-05-25 조회 5,296
08-05-23 조회 3,367
08-05-23 조회 4,506
08-05-21 조회 4,889
08-05-20 조회 4,013
08-05-20 조회 3,249
08-04-18 조회 4,281
글쓰기