이전
목록
다음
A

간단한 텍스트 스크롤

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

---------------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,800
17년 전 조회 2,403
17년 전 조회 1,697
17년 전 조회 1,872
17년 전 조회 2,848
17년 전 조회 2,297
17년 전 조회 1,932
17년 전 조회 4,338
17년 전 조회 3,182
17년 전 조회 1,580
17년 전 조회 3,709
17년 전 조회 2,945
17년 전 조회 2,211
17년 전 조회 1,441
17년 전 조회 2,473
17년 전 조회 2,213
17년 전 조회 2,115
17년 전 조회 2,068
17년 전 조회 1,309
17년 전 조회 2,022
17년 전 조회 3,064
17년 전 조회 1,568
17년 전 조회 1,818
17년 전 조회 1,487
17년 전 조회 1,744
17년 전 조회 1,703
17년 전 조회 1,601
17년 전 조회 2,692
17년 전 조회 2,458
17년 전 조회 2,252
17년 전 조회 1,547
17년 전 조회 2,566
17년 전 조회 4,390
17년 전 조회 2,879
17년 전 조회 1,799
17년 전 조회 1,985
17년 전 조회 3,373
17년 전 조회 2,376
17년 전 조회 3,957
17년 전 조회 1,820
17년 전 조회 2,413
17년 전 조회 2,250
17년 전 조회 1,746
17년 전 조회 2,267
17년 전 조회 2,067
17년 전 조회 2,094
17년 전 조회 3,222
17년 전 조회 2,294
17년 전 조회 1,574
17년 전 조회 1,601
17년 전 조회 2,248
17년 전 조회 3,344
17년 전 조회 2,276
17년 전 조회 1,677
17년 전 조회 4,361
17년 전 조회 2,161
17년 전 조회 3,607
17년 전 조회 6,167
17년 전 조회 1,626
17년 전 조회 1,778
17년 전 조회 1,363
17년 전 조회 1,469
17년 전 조회 3,018
17년 전 조회 2,046
17년 전 조회 2,732
17년 전 조회 1,430
17년 전 조회 3,321
17년 전 조회 2,306
17년 전 조회 2,735
17년 전 조회 1,538
17년 전 조회 1,890
17년 전 조회 1,280
17년 전 조회 1,330
17년 전 조회 1,920
17년 전 조회 1,338
17년 전 조회 4,441
17년 전 조회 1,652
17년 전 조회 2,133
17년 전 조회 7,236
17년 전 조회 1,499
17년 전 조회 2,029
17년 전 조회 3,272
17년 전 조회 1,339
17년 전 조회 2,113
17년 전 조회 1,263
17년 전 조회 1,975
17년 전 조회 2,298
17년 전 조회 3,110
17년 전 조회 1,377
17년 전 조회 1,441
17년 전 조회 1,688
17년 전 조회 1,357
17년 전 조회 4,493
17년 전 조회 4,024
17년 전 조회 2,917
17년 전 조회 1,712
17년 전 조회 1,455
17년 전 조회 1,736
17년 전 조회 2,667
17년 전 조회 1,860
이전 첫 페이지 다음
글쓰기