Script hiệu ứng hover link cầu vồng

  • Thread starter Thread starter AdminAdmin is verified member.
  • Start date Start date
Admin

AdminAdmin is verified member.

Well-Known Member
Staff member
Administrator
Đoạn mã javascript giúp tạo hiệu ứng cầu vồng cho tất cả các đường link trong trang web. Khi rê chuột vào đường link sẽ chóp nhấp nháy 7 màu cầu vồng liên tục.

Demo: http://www.code1k.com/demo/2012/07/script-hieu-ung-hover-link-cau-vong.html

HTML:
<script type="text/javascript">
//<![CDATA[
var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive;
var act = 0;
var elmH = 0;
var elmS = 128;
var elmV = 255;
var clrOrg;
var TimerID;


if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}

function ChangeColor()
{
objActive.style.color = makeColor();
}

function makeColor()
{

if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2   t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2   t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2   t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0"   elmR;
if (elmG.length == 1) elmG = "0"   elmG;
if (elmB.length == 1) elmB = "0"   elmB;

elmH = elmH   rate;
if (elmH >= 360)
elmH = 0;

return '#'   elmR   elmG   elmB;
}
//]]>
</script>
<!-- Code1k.com -->
 

Facebook Comments

Similar threads

cuongpro9x
Replies
1
Views
1K
vietpro2008
V
Admin
Replies
0
Views
896
AdminAdmin is verified member.
Admin
D
Replies
0
Views
991
dgtupltn95
D
Admin
Replies
0
Views
1K
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
6K
AdminAdmin is verified member.
Admin
M
Replies
0
Views
1K
MrLeloi
M
M
Replies
0
Views
1K
MrLeloi
M
Back
Top