Chủ Nhật, 16 tháng 12, 2012

Tạo hiệu ứng chạy chữ cho link liên kết

Với thủ thuật này khi bạn dê chuột vào một link liên kết định trước thì sẽ xuất hiện các chữ hoặc ký tự tỏa ra từ liên kết đó.
Để thấy rõ hơn các bạn hãy xem Demo.
☼ Cách tiến hành:
1- Đăng nhập
2- Vào Bảng điều khiển
3- Chọn Bỗ cục
4- Tạo một HTML/Javarscrip mới
5. Dán đoạn code bên dưới vào.
<script>

///////////////////////////////////////////////////////////////////////////
// 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>

Để cho liên kết của bạn có hiệu ứng thì khi chèn link liên kết bạn sử dụng đoạn code sau trong bài viết.
<a href="URL trang liên kết" onMouseOver="startexplosion('Ghi gì là tùy bạn')">Tên link liên kết</a>
Xuất bản bài viết và xem thành quả nha.

Không có nhận xét nào:

Đăng nhận xét