使用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快速更改字体系列

回答

相关问题