使用onmouseover和setInterval快速更改字體系列

我想使用我網站上的所有導航菜單鏈接執行此操作。（我知道，這聽起來很瘋狂，但我認爲我會試一試，看看它是否看起來很酷）我已經有一個網站使用css和onhover來改變導航菜單中的鏈接的顏色，當鼠標懸停超過它。但是我想讓字體也快速更改字體，直到mouseout事件發生。所以，這裏是我在頭部的腳本部分。使用onmouseover和setInterval快速更改字體系列

<script> 
var changeVar; 
var font = "Impact"; 

changeText() { 
    if font == "Impact" { 
     document.getElementById("tops").style.fontFamily="courier"; 
     font = "Courier"; 
    } 
    else 
     document.getElementById("tops").style.fontFamily="impact"; 
     font = "Impact"; 
    } 
} 
</script>

這裏是我用來測試它的導航鏈接。

<li><a href="tops.html" id="tops" onmouseover="changeVar=setInterval('changeText()', 10);" onmouseout="clearTimeout(changeVar)">Tops</a></li>

即使我把那些東西放在那裏，頁面的功能與我把JavaScript放在那裏前所做的完全一樣。 JavaScript完全不起作用。爲什麼它不起作用？

來源

2013-04-23 user2234760

難道這就是你想幹什麼？

a.navlinkOff { 
    font-family: Arial !important; 
} 
a.navlinkOver1 { 
    font-family: Courier !important; 
} 
a.navlinkOver2 { 
    font-family: Impact !important; 
} 

<a id="navlink1" href="#" class="navlinkOff">Resource 1</a> 
<br /> 
<a id="navlink2" href="#" class="navlinkOff">Resource 2</a> 
<br /> 
<a id="navlink3" href="#" class="navlinkOff">Resource 3</a> 
<br /> 
<a id="navlink4" href="#" class="navlinkOff">Resource 4</a> 
<br /> 
<a id="navlink5" href="#" class="navlinkOff">Resource 5</a> 
<br /> 

var navlinks = document.querySelectorAll("[id^=navlink]"); 
var delay = 250; // milliseconds 
var fired = false; 
var id = {}; 

function defaultClass(evt) { 
    evt.target.className = "navlinkOff"; 
    clearInterval(id[evt.target.id]); 
    fired = false; 
} 

function changeClass(evt) { 
    if (evt.target.className === "navlinkOver1") { 
     evt.target.className = "navlinkOver2"; 
    } else { 
     evt.target.className = "navlinkOver1"; 
    } 

    if (fired) { 
     return; 
    } 

    fired = true; 
    id[evt.target.id] = setInterval(function() { 
     changeClass(evt); 
    }, delay); 
} 

Array.prototype.forEach.call(navlinks, function (navlink) { 
    navlink.addEventListener("mouseout", defaultClass, false); 
    navlink.addEventListener("mouseover", changeClass, false); 
});

上jsfiddle

來源

2013-04-23 20:11:56 Xotic750

謝謝！如果我使用兩個彼此相似且間隔爲1的字體，它實際上看起來很酷。 – user2234760 2013-04-23 22:09:44

[更新]現場演示：http://jsfiddle.net/ffHqe/

看來你剛剛在你的changeText功能的錯誤：

function changeText() { 
if font == "Impact" { 
    document.getElementById("tops").style.fontFamily="courier"; 
    font = "Courier"; 
} 
else { 
    document.getElementById("tops").style.fontFamily="impact"; 
    font = "Impact"; 
} 
}

來源

2013-04-23 20:02:15 Christophe

它沒有工作。我認爲這個問題可能是因爲我使用了外部樣式表，這可能會壓倒我嘗試用JavaScript做的任何事情。 – user2234760 2013-04-23 20:06:15

我已經添加了一個實時演示（它的工作原理，但也許它沒有做你期望的......） – Christophe 2013-04-23 20:29:29

'setInterval'和'setTimeout'可以帶一串代碼或一個函數。如果是字符串，它將有效地評估它。 – 2013-04-23 20:29:31

使用onmouseover和setInterval快速更改字體系列

回答

相關問題