이전
목록
다음
A

간단한 텍스트 스크롤

자인
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 17년 전 · 1684
사용상 변경의 여지는 충분히 있습니다..
소스가 간단하니.. 크게 설명은 필요없을듯 하네요.

---------------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
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
17년 전 조회 1,886
17년 전 조회 2,485
17년 전 조회 1,795
17년 전 조회 1,970
17년 전 조회 2,937
17년 전 조회 2,392
17년 전 조회 2,025
17년 전 조회 4,436
17년 전 조회 3,279
17년 전 조회 1,669
17년 전 조회 3,799
17년 전 조회 3,035
17년 전 조회 2,298
17년 전 조회 1,535
17년 전 조회 2,563
17년 전 조회 2,303
17년 전 조회 2,215
17년 전 조회 2,157
17년 전 조회 1,406
17년 전 조회 2,113
17년 전 조회 3,139
17년 전 조회 1,661
17년 전 조회 1,909
17년 전 조회 1,575
17년 전 조회 1,821
17년 전 조회 1,795
17년 전 조회 1,704
17년 전 조회 2,781
17년 전 조회 2,563
17년 전 조회 2,353
17년 전 조회 1,640
17년 전 조회 2,655
17년 전 조회 4,482
17년 전 조회 2,976
17년 전 조회 1,884
17년 전 조회 2,078
17년 전 조회 3,483
17년 전 조회 2,463
17년 전 조회 4,042
17년 전 조회 1,900
17년 전 조회 2,508
17년 전 조회 2,346
17년 전 조회 1,847
17년 전 조회 2,362
17년 전 조회 2,163
17년 전 조회 2,194
17년 전 조회 3,322
17년 전 조회 2,384
17년 전 조회 1,666
17년 전 조회 1,685
17년 전 조회 2,347
17년 전 조회 3,433
17년 전 조회 2,366
17년 전 조회 1,771
17년 전 조회 4,460
17년 전 조회 2,263
17년 전 조회 3,690
17년 전 조회 6,265
17년 전 조회 1,716
17년 전 조회 1,866
17년 전 조회 1,456
17년 전 조회 1,558
17년 전 조회 3,109
17년 전 조회 2,127
17년 전 조회 2,821
17년 전 조회 1,510
17년 전 조회 3,413
17년 전 조회 2,399
17년 전 조회 2,836
17년 전 조회 1,633
17년 전 조회 1,983
17년 전 조회 1,358
17년 전 조회 1,418
17년 전 조회 2,001
17년 전 조회 1,426
17년 전 조회 4,525
17년 전 조회 1,744
17년 전 조회 2,212
17년 전 조회 7,334
17년 전 조회 1,591
17년 전 조회 2,125
17년 전 조회 3,375
17년 전 조회 1,421
17년 전 조회 2,203
17년 전 조회 1,357
17년 전 조회 2,053
17년 전 조회 2,384
17년 전 조회 3,201
17년 전 조회 1,459
17년 전 조회 1,527
17년 전 조회 1,782
17년 전 조회 1,448
17년 전 조회 4,580
17년 전 조회 4,123
17년 전 조회 3,024
17년 전 조회 1,796
17년 전 조회 1,537
17년 전 조회 1,834
17년 전 조회 2,758
17년 전 조회 1,949
이전 첫 페이지 다음
글쓰기