VN-Lives: JavaScript Effect: Tạo đoạn text nhảy nhót kiểu Mexico.

Đoạn JavaScript dưới đây sẽ tạo một hiệu ứng nhảy nhót điệu Mexico khá thú vụ cho một đoạn văn bản, nếu bạn áp dụng tốt sẽ tạo được một hiệu ứng khá lạ mắt cho website của mình.

Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera

JavaScript Effect Source:

<html>

<head>
<script language="JavaScript1.2">
//configure message
message="http://blog.vnlives.net"
//animate text in NS6? (0 will turn it off)
ns6switch = 1

var ns6 = document.getElementById && !document.all
mes = new Array();
mes[0] = -1;
mes[1] = -4;
mes[2] = -7;
mes[3] = -10;
mes[4] = -7;
mes[5] = -4;
mes[6] = -1;
num = 0;
num2 = 0;
txt = "";

function jump0() {
if (ns6 && !ns6switch) {
jump.innerHTML = message
return
}
if (message.length > 6) {
for (i = 0; i != message.length; i++) {
txt = txt + "<span style='position:relative;' id='n" + i + "'>" + message.charAt(i) + "</span>"
};
jump.innerHTML = txt;
txt = "";
jump1a()
} else {
alert("Your message is to short")
}
}

function jump1a() {
nfinal = (document.getElementById) ? document.getElementById("n0") : document.all.n0
nfinal.style.left = -num2;
if (num2 != 9) {
num2 = num2 + 3;
setTimeout("jump1a()", 50)
} else {
jump1b()
}
}

function jump1b() {
nfinal.style.left = -num2;
if (num2 != 0) {
num2 = num2 - 3;
setTimeout("jump1b()", 50)
} else {
jump2()
}
}

function jump2() {
txt = "";
for (i = 0; i != message.length; i++) {
if (i + num > -1 && i + num < 7) {
txt = txt + "<span style='position:relative;top:" + mes[i + num] + "'>" + message.charAt(i) + "</span>"
} else {
txt = txt + "<span>" + message.charAt(i) + "</span>"
}
}
jump.innerHTML = txt;
txt = "";
if (num != (-message.length)) {
num--;
setTimeout("jump2()", 50)
} else {
num = 0;
setTimeout("jump0()", 50)
}
}
</script>
</head>

<body>
<center>
<h2><div id="jumpx" style="color:blue"></div></h2>
<script>
if (document.all || document.getElementById) {
jump = (document.getElementById) ? document.getElementById("jumpx") : document.all.jumpx
jump0()
} else
document.write(message)
</script>
<font face="Tahoma" size="2"> </font>
</center>
<br>
</body>

</html>

VN-Lives

JavaScript Effect: Tạo đoạn text nhảy nhót kiểu Mexico.

No comments:

Post a Comment