이전
목록
다음
A

간단한 텍스트 스크롤

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

---------------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,830
17년 전 조회 2,427
17년 전 조회 1,732
17년 전 조회 1,904
17년 전 조회 2,881
17년 전 조회 2,326
17년 전 조회 1,963
17년 전 조회 4,367
17년 전 조회 3,214
17년 전 조회 1,605
17년 전 조회 3,738
17년 전 조회 2,972
17년 전 조회 2,248
17년 전 조회 1,474
17년 전 조회 2,499
17년 전 조회 2,236
17년 전 조회 2,142
17년 전 조회 2,096
17년 전 조회 1,341
17년 전 조회 2,052
17년 전 조회 3,080
17년 전 조회 1,600
17년 전 조회 1,844
17년 전 조회 1,517
17년 전 조회 1,766
17년 전 조회 1,729
17년 전 조회 1,640
17년 전 조회 2,722
17년 전 조회 2,495
17년 전 조회 2,282
17년 전 조회 1,579
17년 전 조회 2,593
17년 전 조회 4,423
17년 전 조회 2,915
17년 전 조회 1,823
17년 전 조회 2,013
17년 전 조회 3,407
17년 전 조회 2,403
17년 전 조회 3,982
17년 전 조회 1,836
17년 전 조회 2,448
17년 전 조회 2,276
17년 전 조회 1,778
17년 전 조회 2,302
17년 전 조회 2,094
17년 전 조회 2,124
17년 전 조회 3,255
17년 전 조회 2,318
17년 전 조회 1,605
17년 전 조회 1,629
17년 전 조회 2,280
17년 전 조회 3,367
17년 전 조회 2,302
17년 전 조회 1,700
17년 전 조회 4,397
17년 전 조회 2,196
17년 전 조회 3,637
17년 전 조회 6,200
17년 전 조회 1,649
17년 전 조회 1,802
17년 전 조회 1,396
17년 전 조회 1,488
17년 전 조회 3,047
17년 전 조회 2,067
17년 전 조회 2,756
17년 전 조회 1,449
17년 전 조회 3,347
17년 전 조회 2,333
17년 전 조회 2,764
17년 전 조회 1,565
17년 전 조회 1,918
17년 전 조회 1,299
17년 전 조회 1,353
17년 전 조회 1,940
17년 전 조회 1,365
17년 전 조회 4,466
17년 전 조회 1,685
17년 전 조회 2,157
17년 전 조회 7,269
17년 전 조회 1,522
17년 전 조회 2,058
17년 전 조회 3,307
17년 전 조회 1,362
17년 전 조회 2,146
17년 전 조회 1,298
17년 전 조회 2,003
17년 전 조회 2,327
17년 전 조회 3,137
17년 전 조회 1,405
17년 전 조회 1,467
17년 전 조회 1,720
17년 전 조회 1,385
17년 전 조회 4,519
17년 전 조회 4,066
17년 전 조회 2,943
17년 전 조회 1,741
17년 전 조회 1,477
17년 전 조회 1,769
17년 전 조회 2,697
17년 전 조회 1,891
이전 첫 페이지 다음
글쓰기