이전글 목록 다음글
A

간단한 텍스트 스크롤

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

---------------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,746
17년 전 조회 2,320
17년 전 조회 1,630
17년 전 조회 1,809
17년 전 조회 2,792
17년 전 조회 2,221
17년 전 조회 1,879
17년 전 조회 4,281
17년 전 조회 3,120
17년 전 조회 1,530
17년 전 조회 3,645
17년 전 조회 2,887
17년 전 조회 2,155
17년 전 조회 1,387
17년 전 조회 2,424
17년 전 조회 2,144
17년 전 조회 2,068
17년 전 조회 2,014
17년 전 조회 1,256
17년 전 조회 1,974
17년 전 조회 3,015
17년 전 조회 1,516
17년 전 조회 1,750
17년 전 조회 1,436
17년 전 조회 1,689
17년 전 조회 1,659
17년 전 조회 1,541
17년 전 조회 2,641
17년 전 조회 2,403
17년 전 조회 2,190
17년 전 조회 1,492
17년 전 조회 2,511
17년 전 조회 4,329
17년 전 조회 2,825
17년 전 조회 1,742
17년 전 조회 1,943
17년 전 조회 3,320
17년 전 조회 2,315
17년 전 조회 3,906
17년 전 조회 1,760
17년 전 조회 2,359
17년 전 조회 2,187
17년 전 조회 1,702
17년 전 조회 2,216
17년 전 조회 2,009
17년 전 조회 2,044
17년 전 조회 3,176
17년 전 조회 2,236
17년 전 조회 1,521
17년 전 조회 1,543
17년 전 조회 2,200
17년 전 조회 3,284
17년 전 조회 2,221
17년 전 조회 1,612
17년 전 조회 4,318
17년 전 조회 2,113
17년 전 조회 3,549
17년 전 조회 6,118
17년 전 조회 1,573
17년 전 조회 1,733
17년 전 조회 1,321
17년 전 조회 1,423
17년 전 조회 2,956
17년 전 조회 1,983
17년 전 조회 2,677
17년 전 조회 1,378
17년 전 조회 3,259
17년 전 조회 2,244
17년 전 조회 2,681
17년 전 조회 1,495
17년 전 조회 1,844
17년 전 조회 1,228
17년 전 조회 1,284
17년 전 조회 1,867
17년 전 조회 1,302
17년 전 조회 4,381
17년 전 조회 1,595
17년 전 조회 2,087
17년 전 조회 7,175
17년 전 조회 1,459
17년 전 조회 1,979
17년 전 조회 3,205
17년 전 조회 1,300
17년 전 조회 2,065
17년 전 조회 1,222
17년 전 조회 1,924
17년 전 조회 2,243
17년 전 조회 3,050
17년 전 조회 1,327
17년 전 조회 1,406
17년 전 조회 1,636
17년 전 조회 1,311
17년 전 조회 4,441
17년 전 조회 3,983
17년 전 조회 2,868
17년 전 조회 1,674
17년 전 조회 1,409
17년 전 조회 1,672
17년 전 조회 2,601
17년 전 조회 1,817
이전 첫 페이지 다음
글쓰기