본문 바로가기

javascript

텍스트 네온글로우 효과

<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->

<script>
<!-- Beginning of JavaScript -

var message="1000 + 자바스크립트 소스 뱅크" // 표시할 텍스트
var textfont="Verdana" // 글꼴
var textsize=35           // 글자크기
var textcolor="red"      // 글자 색상
var glowcolor="yellow"  // 배경색상
var glowstrength=0
var x,y
function handlerMM(e){
        x = (document.layers) ? e.pageX : event.clientX
        y = (document.layers) ? e.pageY : event.clientY
}        
function initiate() {
    if (document.all) {  // IE 용 코드
                document.onmousemove = handlerMM;
        glowmessage()
    }
        if (document.layers) { // 네츠용 코드
                document.onmousemove = handlerMM;
                document.captureEvents(Event.MOUSEMOVE);
                textsize=10
        glowmessage()
    }
}
function glowmessage() {                
        if(document.all) {
                glowstrength=Math.round(x/80)+Math.round(y/80)
                glowtext.innerHTML="<span id='glowspan' style='position:absolute;filter:glow(strength="+glowstrength+",color="+glowcolor+");font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+"'>"+message+"</span>";
                var timer=setTimeout("glowmessage()",100)
        }
        if(document.layers) {
                textsize=3*Math.round(x/80)+3*Math.round(y/80)
                document.glowtext.document.write("<span id='glowspan' style='position:absolute;font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+"'>"+message+"</span>")
                document.glowtext.document.close()
                var timer=setTimeout("glowmessage()",100)
        }
}

// - End of JavaScript - -->
</script>
</HEAD>

<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->

<BODY bgcolor="#000000" onLoad="initiate()" text="white" link="yellow" alink="yellow" vlink="yellow">

<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->

<div id="glowtext" style="position:absolute;top:10px;left:10px"></div>