본문 바로가기

javascript

온 마우스 오버로 하이퍼링크 파편튀게 하기

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


<script>
                
// 파편의 갯수
var debrisnumber=40

// 파편의 색깔. 더 추가하셔도 됩니다
var debriscolor=new Array("FF0000","AA0000","FF4400","DD2255")
</script>

<script>
var x_debrispos
var y_debrispos
var x,y
var x_random=new Array()
var y_random=new Array()
var max_explsteps=20
var i_explsteps=0
var i_color=0
var pause=10

function startexplosion() {
    i_explsteps=0
    x_debrispos=x
    y_debrispos=y
    for (i=0;i<=debrisnumber;i++) {
        x_random[i]=Math.ceil(40*Math.random())-20
        y_random[i]=Math.ceil(40*Math.random())-20
        }
        if (document.all) {
        for (i=0;i<=debrisnumber;i++) {
            var thisspan=eval("document.all.span"+i+".style")
            thisspan.visibility="VISIBLE"
                        thisspan.posLeft=x_debrispos
                        thisspan.posTop=y_debrispos
                }
        explode_IE()
    }
    if (document.layers) {
        for (i=0;i<=debrisnumber;i++) {
            var thisspan=eval("document.span"+i)
            thisspan.visibility="VISIBLE"
            thisspan.left=x_debrispos
            thisspan.top=y_debrispos
                }
        explode_NN()
    }
}

function explode_IE() {
        if (i_explsteps<=max_explsteps) {
                for (i=0;i<=debrisnumber;i++) {
            var thisspan=eval("document.all.span"+i+".style")
            thisspan.posLeft+=x_random[i]
            thisspan.posTop+=y_random[i]
                }
                i_explsteps++
                var timer=setTimeout("explode_IE()",pause)
        }
        else {
                for (i=0;i<=debrisnumber;i++) {
                var thisspan=eval("document.all.span"+i+".style")
                thisspan.visibility="HIDDEN"
                }
                clearTimeout(timer)
        }
}

function explode_NN() {
        if (i_explsteps<=max_explsteps) {
                for (i=0;i<=debrisnumber;i++) {
            var thisspan=eval("document.span"+i)
            thisspan.left+=x_random[i]
            thisspan.top+=y_random[i]
                }
                i_explsteps++
                var timer=setTimeout("explode_NN()",pause)
        }
        else {
                for (i=0;i<=debrisnumber;i++) {
            var thisspan=eval("document.span"+i)
            thisspan.visibility="HIDDEN"
                }
                clearTimeout(timer)
        }
}

function handlerMM(e){
        x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
        y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
}

if (document.layers){
        document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

document.write("<style>")
document.write(".spanstyle {")
document.write("position:absolute;")
document.write("visibility:hidden;")
document.write("}")
document.write("</style>")

for (i=0;i<=debrisnumber;i++) {
    document.write("<div id='span"+i+"' class='spanstyle'>")
    document.write("<table cellpadding=0 cellspacing=0>")
    document.write("<tr><td bgcolor="+debriscolor[i_color]+">")
    document.write("<img src='emptypixel.gif' width=3>")
    document.write("</td></tr></table>")
    document.write("</div>")
    i_color++
    if (i_color>=debriscolor.length) {i_color=0}
}


</script>


<CENTER><a href="#" onMouseOver="startexplosion()" target="_blank">여기에 마우스를 대어 보세요</a></CENTER>