Hải Nam

Tạo liên kết đổi màu chậm

Hãy nhìn qua góc trên, bên trái, đưa chuột vào chỗ có liên kết log out (hay log in), bạn sẽ thấy màu biến đổi rất dễ chịu. Bài viết này sẽ hướng dẫn bạn làm điều đó.

Trước tiên, bạn chèn đoạn chương trình sau vào trang web:

Mã lệnh (Javascript)

startColor = "#0000FF"; // MouseOut link color
endColor = "#FF6600"; // MouseOver link color
stepIn = 20; // delay when fading in
stepOut = 20; // delay when fading out

function dehexize(Color) // convert color to decimal
{
var colorArr = new Array(3)
for (i=1; i<7; i++)
{
for (j=0; j<16; j++)
{
if (Color.charAt(i) == hx[j])
{
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}
function setColor(r, g, b, el) {el.style.color = "#"+convertToHex(r)+convertToHex(g)+convertToHex(b)}
function fade(el, step, s, e)
{
s = dehexize(s)
e = dehexize(e)
for (var i=0; i<=step; i++)
{
var ps = step-i
var pe = i
setTimeout('setColor(Math.floor('+(s[0]*ps/step+e[0]*pe/step)+'), Math.floor('+(s[1]*ps/step+e[1]*pe/step)+'), Math.floor('+(s[2]*ps/step+e[2]*pe/step)+'), '+el+')', i*step)
}
}
startColor = dehexize(startColor.toUpperCase())
endColor = dehexize(endColor.toUpperCase())

Chú ý chép thêm cả hàm convertToHex trong phần đầu của loạt bài này.

Đoạn chương trình trên làm gì?

Hàm dehexize() chuyển màu từ dạng hexa sang mảng 3 phần tử (cho 3 màu r, g, b) để tiện dùng
Hàm setColor() đặt màu cho 1 phần tử el
Hàm fade() đặt các hàm đổi màu cho phần tử el, biến đổi màu từ s (start) sang e (end) theo step bước. Cách làm của nó là dùng setTimeout để đặt thời gian thi hành hàm setColor (không thi hành lập tức, mà thi hành sau một thời gian định sẵn) với các màu khác nhau.

Như vậy mọi thứ đã gần hoàn tất, việc cuối cùng là móc nối hàm fade() vào các biến cố thích hợp

Mã lệnh (Javascript)

var link = document.all.tags('A')
for (var i=0; i<link.length; i++)
{
if (link[i].className=='transient')
{
link[i].onmouseover = function() {fade(this.uniqueID, 20, '#0000FF', '#FF0000')}
link[i].onmouseout = function() {fade(this.uniqueID, 20, '#FF0000', '#0000FF')}
link[i].style.color = '#0000FF'
}
}

Đoạn mã này cần được thực hiện sau cùng, nó quét tất cả các liên kết, xem liên kết nào có lớp transient thì đặt các hàm fade() khác nhau cho biến cố onmouseover và onmouseout. Như vậy, muốn liên kết nào có hiệu ứng trên, bạn ghi thêm class="transient". Thí dụ:

HTML

Cuối cùng, như thường lệ, là một thí dụ trọn gói, để bạn có thể cắt dán mà xài, khỏi suy nghĩ chi mất công

<html>

<head>

</head>

function createHexArray()

{

this.length = 16;

for (var i=0;i<=9;i++) this[i] = i;

this[10] = "A";

this[11] = "B";

this[12] = "C";

this[13] = "D";

this[14] = "E";

this[15] = "F";

return this;

}

hx = new createHexArray();

function convertToHex(x)

{

string = hx[parseInt(x/16)] + "" + hx[x%16];

return string;

}

startColor = "#0000FF"; // MouseOut link color

endColor = "#FF6600"; // MouseOver link color

stepIn = 20; // delay when fading in

stepOut = 20; // delay when fading out

function dehexize(Color)	// convert color to decimal

{

var colorArr = new Array(3)

for (i=1; i<7; i++)

{

for (j=0; j<16; j++)

{

if (Color.charAt(i) == hx[j])

{

if (i%2 !=0)

colorArr[Math.floor((i-1)/2)]=eval(j)*16;

else

colorArr[Math.floor((i-1)/2)]+=eval(j);

}

return colorArr;

}

function setColor(r, g, b, el) {el.style.color = "#"+convertToHex(r)+convertToHex(g)+convertToHex(b)}

function fade(el, step, s, e)

{

s = dehexize(s)

e = dehexize(e)

for (var i=0; i<=step; i++)

{

var ps = step-i

var pe = i

setTimeout('setColor(Math.floor('+(s[0]*ps/step+e[0]*pe/step)+'), Math.floor('+(s[1]*ps/step+e[1]*pe/step)+'), Math.floor('+(s[2]*ps/step+e[2]*pe/step)+'), '+el+')', i*step)

}

startColor = dehexize(startColor.toUpperCase())

endColor = dehexize(endColor.toUpperCase())

</script>

Thí dụ về liên kết đổi màu chậm: <a href="http://hn4u.com" class="transient">hn4u.com</a> <a href="http://vp2000.org" class="transient">vp2000.org</a>

</body>

var link = document.all.tags('A')

for (var i=0; i<link.length; i++)

{

if (link[i].className=='transient')

{

link[i].onmouseover = function() {fade(this.uniqueID, 20, '#0000FF', '#FF0000')}

link[i].onmouseout = function() {fade(this.uniqueID, 20, '#FF0000', '#0000FF')}

link[i].style.color = '#0000FF'

}

</script>

<html>