Tạo hiệu ứng cho link liên kết phần 2

Hôm nay, ketoanthanhtu tiếp tục chia sẻ với các bạn cách tạo hiệu ứng cho link liên kết (phần 2). Với phần 2 này, khi các bạn rê chuột vào mỗi link liên kết thì sẽ có các chữ hoặc các symbol toả ra khá đẹp và ngộ nghĩnh.

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////
      
// Đặt số lượng chữ hiển thị theo ý thích của bạn 
var sparklenumber=20

// Đặt lại font chữ theo ý thích của bạn
var sparklefont=new Array(“Arial”,”Times”,”Comic Sans MS”)

// Đặt lại kích thước chữ theo ý thích của bạn
var sparklesize=new Array(5,10,15,20)

// Đặt lại mã màu theo ý thích
var sparklecolor=new Array(“#FF0000″,”#0000FF”,”#00FF00″,”#000000″)

// Đặt lại tốc độ theo ý thích của bạn (số càng lớn tốc độ càng chậm)
var speed=20

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var sparklesizeNS4=new Array()
var x_sparklepos
var y_sparklepos
var x,y
var x_random=new Array()
var y_random=new Array()
var max_explsteps=80
var i_explsteps=0
var i_color=0
var i_size=0
var i_font=0
var marginbottom
var marginright
var sparklewidth=20
var sparkleheight=20
var isloaded=false

var browserinfos=navigator.userAgent
var ie4=document.all&&!document.getElementById&&!browserinfos.match(/Opera/)
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=!document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)
var browserok=ie4||ie5||ns4||ns6||opera

function initlinkexploder() {
    isloaded=true
}

function startexplosion(whatword) {
    if (isloaded) {
        i_explsteps=0
        x_sparklepos=x
        y_sparklepos=y
        for (i=0;i<=sparklenumber;i++) {
            x_random[i]=Math.ceil(20*Math.random())-10
            y_random[i]=Math.ceil(20*Math.random())-10
            while(x_random[i]>-2 && x_random[i]<2) {
                x_random[i]=Math.ceil(20*Math.random())-10
                y_random[i]=Math.ceil(20*Math.random())-10
            }
        }
        if (ie5||opera) {
            marginbottom=document.body.clientHeight
            marginright=document.body.clientWidth
        }
        if (ns6) {
            marginbottom=window.innerHeight
            marginright=window.innerWidth
        }
        for (i=0;i<=sparklenumber;i++) {
             var thisspan=document.getElementById(“span”+i).style
            thisspan.visibility=”VISIBLE”
            thisspan.left=x_sparklepos+”px”
            thisspan.top=y_sparklepos+”px”
            var thisspan=document.getElementById(“span”+i)
            thisspan.innerHTML=whatword
            sparklewidth=parseInt(thisspan.offsetWidth)
            sparkleheight=parseInt(thisspan.offsetHeight)
        }
    explode()
    }
}

function explode() {
    if (i_explsteps<=max_explsteps) {
        for (i=0;i<=sparklenumber;i++) {  
            var thisspan=document.getElementById(“span”+i).style
            if (parseInt(thisspan.left)>=marginright-sparklewidth-30+document.body.scrollLeft || parseInt(thisspan.top)>=marginbottom-sparkleheight-20+document.body.scrollTop) {
                   thisspan.left=-1000+”px”
                thisspan.top=-1000+”px”          
            }
            else {
                thisspan.visibility=”VISIBLE”
                thisspan.left=parseInt(thisspan.left)+x_random[i]+”px”
                thisspan.top=parseInt(thisspan.top)+y_random[i]+”px”
            }  
        }
        i_explsteps++
        var timer=setTimeout(“explode()”,speed)
    }
    else {
        for (i=0;i<=sparklenumber;i++) {
            var thisspan=document.getElementById(“span”+i).style
            thisspan.visibility=”hidden”
        }
        clearTimeout(timer)
    }
}

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

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<=sparklenumber;i++) {
       document.write(“<div id=’span”+i+”‘ class=’spanstyle’ style=’font-family:”+sparklefont[i_font]+”;font-size:”+sparklesize[i_size]+”pt;color:”+sparklecolor[i_color]+”;’>”)
    document.write(“.”)
    document.write(“</div>”)
    i_color++;i_font++;i_size++;
    if (i_color>=sparklecolor.length) {i_color=0}
    if (i_font>=sparklefont.length) {i_font=0}
    if (i_size>=sparklesize.length) {i_size=0}
}
if (browserok) {
    window.onload=initlinkexploder
}
</script>