javascript

javascript 팁이 있는 곳입니다.
관련메뉴 jquery | Vue.js
  • 웹미니 한줄 전광판 영역 입니다.
글 수 109

타이핑 텍스트 12 (뉴스티커 기능)

2009.11.04 20:00:16 댓글 바로가기

집중모드 켜기

0

조회 수 : 8247 신고 : 0

작성자 : 웹준
포인트 : 672 | 레벨 : 2
미리보기 :  
이 자료는 블루비에서 얻어온 자료입니다^^
 
<html>
<head>
    <title>뉴스티커 기능</title>

<style>
#so_oTickerContainer {
    width:500px;
    margin:auto;
    font:verdana,arial;
    background-color:lightyellow;
    border-top:1px solid yellow;
    border-bottom:1px solid yellow;
}

#so_oTickerContainer h1 {
    font:bold verdana,arial;
    margin:0;
    padding:0;
}
    
.so_tickerContainer {
    position:relative;
    margin:auto;
    width:500px;
    background-color:lightyellow;
    border-top:1px solid yellow;
    border-bottom:1px solid yellow;
}

#so_tickerAnchor, #so_oTickerContainer a {
    text-decoration:none;
    color:black;
    font:bold arial,verdana;
    border-right:1px solid #000;
    padding-right:2px;
}

#so_oTickerContainer a {
    border-style:none;
}

#so_oTickerContainer ul {
    margin-top:5px;
}

#so_tickerDiv {
    display:inline;
    margin-left:5px;
}

#so_tickerH1 {
    font:bold 1.0em arial,verdana;
    display:inline;
}

#so_tickerH1 a {
    text-decoration:none;
    color:#000;
    padding-right:2px;
}

#so_tickerH1 a img {
    border-style:none;
}
</style>
<script>
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Steve Chipman | http://slayeroffice.com/Licensed under: Creative Commons License
*/

/****************************

so_ticker
version 1.0
last revision: 03.30.2006
steve@slayeroffice.com

For implementation instructions, see:
http://slayeroffice.com/code/so_ticker/

Should you improve upon or modify this
code, please let me know so that I can update
the version hosted at slayeroffice.

Please leave this notice intact.


****************************/

so_ticker = new Object();
so_ticker = {
    current:0,            
    currentLetter:0,    
    zInterval:null,    
    tObj: null,            
    op:0.95,            
    pause: false,        
    tickerContent: [],    
    LETTER_TICK:100,
    FADE: 10,
    NEXT_ITEM_TICK: 3000,
    init:function() {
        var d=document;    
        var mObj = d.getElementById("so_oTickerContainer");    
        so_ticker.tObj = d.createElement("div");        
        so_ticker.tObj.setAttribute("id","so_tickerDiv");
        var h = d.createElement("h1");    
        h.appendChild(d.createTextNode(so_ticker.getTextNodeValues(mObj.getElementsByTagName("h1")[0])));    
        h.setAttribute("id","so_tickerH1");    
        var ea = d.createElement("a");
        ea.setAttribute("href","javascript:so_ticker.showContent();");
        pImg = ea.appendChild(document.createElement("img"));
        pImg.setAttribute("src","http://www.blueb.co.kr/SRC/javascript/image6/arrow_image2.gif");
        pImg.setAttribute("alt","Click to View all News Items.");
        ea.setAttribute("title","Click to View all News Items.");
        h.insertBefore(ea,h.firstChild);
        anchors = mObj.getElementsByTagName("a");        
        var nObj = mObj.cloneNode(false);        
        mObj.parentNode.insertBefore(nObj,mObj);
        mObj.style.display = "none";    
        nObj.className = "so_tickerContainer";     
        nObj.setAttribute("id","so_nTickerContainer");
        nObj.appendChild(h);     
        nObj.appendChild(so_ticker.tObj);    
        so_ticker.getTickerContent();    
        so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);    
    },
    showContent:function() {
            var d = document;
            d.getElementById("so_oTickerContainer").style.display = "block";
            d.getElementById("so_nTickerContainer").style.display = "none";
            d.getElementById("so_oTickerContainer").getElementsByTagName("a")[0].focus();
            clearInterval(so_ticker.zInterval);
    },
    getTickerContent:function() {
        for(var i=0;i<anchors.length;i++) so_ticker.tickerContent[i] = so_ticker.getTextNodeValues(anchors[i]);
    },
    getTextNodeValues:function(obj) {
        if(obj.textContent) return obj.textContent;
        if (obj.nodeType == 3) return obj.data;
        var txt = [], i=0;
        while(obj.childNodes[i]) {
            txt[txt.length] = so_ticker.getTextNodeValues(obj.childNodes[i]);
            i++;
        }
        return txt.join("");
    },
    tick: function() {
        var d = document;
        if(so_ticker.pause) {
            try {
                so_ticker.clearContents(d.getElementById("so_tickerAnchor"));
                d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current]));
                so_ticker.currentLetter = so_ticker.tickerContent[so_ticker.current].length;
            } catch(err) { }
            return;
        }
        if(!d.getElementById("so_tickerAnchor")) {
            var aObj = so_ticker.tObj.appendChild(d.createElement("a"));
            aObj.setAttribute("id","so_tickerAnchor");
            aObj.setAttribute("href",anchors[so_ticker.current].getAttribute("href"));
            aObj.onmouseover = function() { so_ticker.pause = true; }
            aObj.onmouseout = function() { so_ticker.pause = false; }
            aObj.onfocus = aObj.onmouseover;
            aObj.onblur = aObj.onmouseout;
            aObj.setAttribute("title",so_ticker.tickerContent[so_ticker.current]);
        }
        d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current].charAt(so_ticker.currentLetter)));
        so_ticker.currentLetter++;
        if(so_ticker.currentLetter > so_ticker.tickerContent[so_ticker.current].length) {
            clearInterval(so_ticker.zInterval);
            setTimeout(so_ticker.initNext,so_ticker.NEXT_ITEM_TICK);
        }
    },
    fadeOut: function() {
        if(so_ticker.paused) return;
        so_ticker.setOpacity(so_ticker.op,so_ticker.tObj);
        so_ticker.op-=.10;
        if(so_ticker.op<0) {
            clearInterval(so_ticker.zInterval);
            so_ticker.clearContents(so_ticker.tObj);
            so_ticker.setOpacity(.95,so_ticker.tObj);
            so_ticker.op = .95;
            so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);
        }
    },
    initNext:function() {
            so_ticker.currentLetter = 0, d = document;
            so_ticker.current = so_ticker.tickerContent[so_ticker.current + 1]?so_ticker.current+1:0;
            d.getElementById("so_tickerAnchor").setAttribute("href",anchors[so_ticker.current].getAttribute("href"));
            d.getElementById("so_tickerAnchor").setAttribute("title",so_ticker.tickerContent[so_ticker.current]);
            so_ticker.zInterval = setInterval(so_ticker.fadeOut,so_ticker.FADE);
    },
    setOpacity:function(opValue,obj) {
        obj.style.opacity = opValue;
        obj.style.MozOpacity = opValue;
        obj.style.filter = "alpha(opacity=" + (opValue*100) + ")";
    },
    clearContents:function(obj) {
        try {
            while(obj.firstChild) obj.removeChild(obj.firstChild);
        } catch(err) { }
    }
}


function page_init(){
    so_ticker.init();
}
window.addEventListener?window.addEventListener("load",page_init,false):window.attachEvent("onload",page_init);

</script>
</head>
<body>


<div id="so_oTickerContainer">
    <h1>Latest News:</h1>
    <ul>
        <li><a href="http://www.blueb.co.kr">안녕하세요. 블루비에 오신것을 환영합니다.</a></li>
        <li><a href="http://www.blueb.co.kr">블루비는 웹개발자들을 위한 공간입니다.</a></li>
        <li><a href="http://www.blueb.co.kr">자료만 보시고 훌쩍 떠나는 유령은 반성하세요..</a></li>
        <li><a href="http://www.blueb.co.kr">감사합니다.</a></li>
    </ul>
</div>


</body>
</html>
0 0
이 글이 마음에 드셨다면 웹준님에게 포인트를 선물 하세요!
엮인글 :
https://web.webmini.net/javascript/118177/278/trackback
이 게시물을...
목록 이전 다음
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '4'

아트리147 (118292)

2009.11.04 21:23:08

뭔솔..

0 0 신고
조커 (118342)

2009.11.04 22:08:20

아 아직 답변이 없으시군...
0 0 신고
leecher (137939)

2009.12.16 00:34:01

ㅡㅡ  머가 이리 길어

0 0 신고
댕댕이 (148959)

2010.01.11 02:40:42

아.. 어렵다.ㅠㅠ

0 0 신고
List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
89 작은 그림과 큰그림 한문서 안에 넣기 [2] title: [ani]깜빡이는 표정빽짱구 2004-02-07 15 5490
88 즐겨찾기 추가하기 title: [ani]깜빡이는 표정빽짱구 2004-02-16 14 5665
87 타이틀바 꾸미기3 (옆으로 움직임) [1] title: [ani]깜빡이는 표정빽짱구 2004-04-22 13 5703
86 선택복사하기 title: [ani]깜빡이는 표정빽짱구 2004-04-22 10 5857
85 플래쉬효과 문자 title: [ani]깜빡이는 표정빽짱구 2004-02-29 11 5882
84 best of best 클릭하면 메뉴가 나타나고, 다시 클릭하면 닫히는 소스 [1] title: [ani]깜빡이는 표정빽짱구 2004-10-31 33 5887
83 잘못된 연산창 띄우기 title: [ani]깜빡이는 표정빽짱구 2005-11-28 5 5986
82 best of best 텍스트 타이핑효과 title: [ani]깜빡이는 표정빽짱구 2004-04-22 22 5989
81 best of best 통통 티는 탑버튼 만들기 title: [ani]깜빡이는 표정빽짱구 2005-03-19 23 6047
80 자바스크립트 1일차 document [1] title: [ani]보라색 나비바비인형 2005-04-09 17 6090
79 이미지 체인징 효과주기 title: [ani]깜빡이는 표정빽짱구 2004-02-07 14 6109
78 best of best 위에서 아래로 떨어지는 메뉴 title: [ani]깜빡이는 표정빽짱구 2004-10-31 20 6109
77 양쪽으로 새창띄우기 title: [ani]깜빡이는 표정빽짱구 2005-11-28 8 6139
76 best of best 따라다니는 탑버튼 title: [ani]깜빡이는 표정빽짱구 2004-02-28 21 6185
75 모바일 페이지 코딩시 주소창 사라지는 방법 title: [ani]깜빡이는 표정빽짱구 2012-10-12   6234
74 해당셀로 따라다니는 화살표 title: [ani]깜빡이는 표정빽짱구 2005-12-04 10 6278
73 여러가지 형태로 경고창을 띄워보자 title: [ani]깜빡이는 표정빽짱구 2005-11-28 8 6424
72 골때리는 자바스크립트 4탄!!! 이병준 2010-05-28   6598
71 골때리는 자바스크립트 5탄!!! 이병준 2010-05-28   6621
70 오늘날짜 스크립트 title: [ani]깜빡이는 표정빽짱구 2011-10-27   6633
목록