制作html5鏈接文字特效的方法介紹

下面我們給大家介紹一下制作html5鏈接文字特效的方法吧!希望大家可以在這裡學習!

<style type="text/css">
　　.menulinks {position:relative;}
　　#menucont a{color:#006699; font-weight:bold; text-decoration:none;}
　　#menucont a:hover{color:#ff0000; font-weight:bold; text-decoration:underlineoverline; text-transform: uppercase;}
　　</style>
　　<script LANGUAGE="Javascript">
　　<!-- Begin
　　nSpace=5   // how many space maximum between each letter
　　nSpeed=100 // the speed of the animation
　　timerLSM=null;
　　function LetterSpacingMenu() {
　 　if(document.getElementById){
　  　lnks = Math.floor(Math.random()*lnk.length);
　  　letterSpacing = Math.floor(Math.random()*nSpace);
　  　lnk[lnks].style.letterSpacing = letterSpacing + "px";
　  　timerLSM = setTimeout("LetterSpacingMenu()", nSpeed);
　 　}
　　}
　　function StopMenu() {
　 　if(document.getElementById) {
　  　clearTimeout(timerLSM);
　  　for(i=0;i<lnk.length;i++)
　  　lnk[i].style.letterSpacing = 0 + "px";
　 　}
　　}
　　function LSMenuInit() {
　 　if(document.getElementById) {
  　　lnk = document.getElementById("menucont").getElementsByTagName("a");
  　　cnt = document.getElementById("menucont");
　  　cnt.style.textAlign= "center";
　  　cnt.onmouseover=StopMenu;
　  　cnt.onmouseout=LetterSpacingMenu;
　  　LetterSpacingMenu();
　 　}
　　}
　　onload=LSMenuInit;
　　//  End -->
　　</script>

<div id="menucont">
　　<a href="#" id="a1" class="menulinks" title="what's new">what's new</a><br>
　　<a href="#" id="a2" class="menulinks" title="about this site">about this site</a><br>
　　<a href="#" id="a3" class="menulinks" title="dhtml scripts">dhtml scripts</a><br>
　　<a href="#" id="a4" class="menulinks" title="dhtml tutorials">dhtml tutorials</a><br>
　　<a href="#" id="a5" class="menulinks" title="dhtml links">dhtml links</a><br>
　　<a href="#" id="a6" class="menulinks" title="promote this site">promote this site</a><br>
　　<a href="#" id="a7" class="menulinks" title="contact us">contact us</a>
　　</div>

以上就是由精品為您提供的制作html5鏈接文字特效的方法，希望給您帶