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/95c/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
번호 제목 글쓴이 날짜 추천 수 조회 수
89 골때리는 자바스크립트의 세계 1탄 이병준 2010-05-28   7169
88 javascript 지렁이게임 이병준 2010-05-27   8070
87 파노라마 사진 스크립트 [1] 이병준 2010-05-27   7235
86 자바스크립트 암호방법들 file 혁이 2010-04-23   8203
85 블랜딩 메뉴 효과 file [4] 정천 2010-03-05   7683
84 '베너가져가기' 클릭 시 "소스"가 복사되는 스크립트 정천 2010-03-05 1 8671
83 링크 점선 없에는 스크립트 [3] Tooli 2010-02-27   7050
82 hit 자동으로 늘어나는 아이프레임 (익스+파폭) title: [ani]깜빡이는 표정빽짱구 2010-02-10   10018
81 카피라이터에 년도를 자동으로 바꿔주자! [5] title: [ani]깜빡이는 표정빽짱구 2010-02-08   8282
80 아래로가는 버튼 [1] sky 2009-11-25   6937
79 타이핑 텍스트 12 (뉴스티커 기능) [4] 웹준 2009-11-04   8247
78 따라다니는 레이어 [4] title: [ani]깜빡이는 표정빽짱구 2009-10-09   9471
77 hit [Javascript]버튼클릭시 레이어창 띄우기 file [4] title: [ani]깜빡이는 표정빽짱구 2008-11-13 1 18717
76 hit 마우스오버시 롤링되는배너 (파폭지원) [1] title: [ani]깜빡이는 표정빽짱구 2008-07-01   16229
75 hit 페이지내의 단어검색하기 (파폭지원) title: [ani]깜빡이는 표정빽짱구 2008-06-23   13616
74 hit 버튼클릭시 레이어창 띄우기 [1] title: [ani]깜빡이는 표정빽짱구 2008-06-19 1 16561
73 hit (파폭,익스,오페라) 즐겨찾기추가하기 title: [ani]깜빡이는 표정빽짱구 2008-04-15   15648
72 hit 여러 방법의 팝업창 소스 [6] title: [ani]깜빡이는 표정빽짱구 2008-02-27 4 66895
71 hit 원하는 부분 프린트 하기 [1] title: [ani]깜빡이는 표정빽짱구 2008-01-21   11742
70 hit 콘텐트의 높이에 따라 자동으로 Resizing 되는 Iframe 만들기. [1] title: [ani]깜빡이는 표정빽짱구 2007-12-14   19352
목록