Ticker 만들기

위로 올라가면서 내용을 보여주는 효과

tickerContainer의 높이 만큼 이동 후 delay(밀리초)만큼 쉬고 다시 올라간다. 이동이 다 끝나면 처음부터 다시 시작. 한 화면에 여러개의 ticker 를 추가 할 수 있음

 /**
 * ticker effect
 *
 * ex) initTicker(document.getElementById("banner-scroll"), document.getElementById("banner-content"), 3000);
 */
var tickerEl = new Array();
function initTicker(tickerContainer, tickerContent, delay)
{
    var speed = 50;        // milisecond

    tickerEl[tickerEl.length] = tickerContainer;
    tickerContainer.moveOffset = tickerContainer.offsetHeight;
    tickerContainer.count = 0;
    tickerContainer.delay = delay / speed;

    tickerContainer.cont = tickerContent;
    tickerContainer.cont.currentHeight = 0;
    tickerContainer.cont.innerHTML += tickerContainer.cont.innerHTML;

    tickerContainer.move = setInterval("tickerRoll()", speed);
}

function tickerRoll()
{
    for (i=0; i<tickerEl.length; i++) {
        if (tickerEl[i].cont.currentHeight % tickerEl[i].moveOffset == 0 && tickerEl[i].count < tickerEl[i].delay) {
            tickerEl[i].count++;
        } else {
            tickerEl[i].count = 0;
            tickerEl[i].cont.currentHeight--;
            tickerEl[i].cont.style.top = tickerEl[i].cont.currentHeight + "px";
            if (tickerEl[i].cont.currentHeight % (tickerEl[i].cont.offsetHeight / 2) == 0) {
                tickerEl[i].cont.currentHeight = 0;
            }
        }
    }
}

좌우로 글자가 흐르면서 내용을 보여주는 효과

<div id="point-ranking-container" class="container">
    <p>
        <span>
            1위 : 홍길동(호부호형) 543chem /
            2위 : 길동이(가나다라) 436chem /
            3위 : 홍길동(호부호형) 343chem //
        </span>
    </p>
</div>
<script type="text/javascript">
initTicker(document.getElementById("point-ranking-container"));
</script>

#point-ranking-container {
    position: relative; width: 533px; height: 1.3em; overflow: hidden; }
#point-ranking p { margin: 0; }

function initTicker(container) {
    mover = container.getElementsByTagName("p").item(0);
    text = mover.getElementsByTagName("span").item(0);

    // set
    mover.style.position = "absolute";
    mover.style.margin = "0 0 0 0";
    mover.style.left = "0px";
    mover.leftPosition = 0;
    mover.style.width = text.childNodes.item(0).length + "em";    // stretch width
    textWidth = text.offsetWidth;

    if (textWidth > container.offsetWidth) {    // enough space for move
        // duplicate text
        mover.style.width = textWidth * 2 + "px";
        mover.innerHTML += mover.innerHTML;

        // set action
        mover.tickerAction = window.setInterval(
            function()
            {
                if (mover.leftPosition * -1 > textWidth) {
                    mover.leftPosition = -1;
                } else {
                    mover.leftPosition -= 1;
                }
                mover.style.left = mover.leftPosition + "px";
            }
        , 40);
    }
}