鼠标移过放大的JS动态菜单代码,JS代码库,德仔网

代码语言

代码分类

【JS】鼠标移过放大的JS动态菜单

作者:Dezai.CN / 发布于2013/9/25/ 651


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>www.lanrentuku.com</title>
	<style type="text/css">
	html {
	 overflow: hidden;
	}
	body {
	 background: #222;
	}
	#menu {
	 padding: 10px;
	 background: #000;
	 height: 300px;
	 width: 400px;
	}
	#menu a {
	 display:block;
	 text-decoration:none;
	 font-family: arial, helvetica, verdana, sans-serif;
	 white-space: nowrap;
	}

	</style>

	<script type="text/javascript"><!--
	var P,T;
	var over = -1;

	///////////////
	var fontSize = 38;
	var lensFX = 1;
	var num = true;
	var color = "#FFF";
	var selected = "#F80";
	///////////////

	function zoom(s){
	if(s!=over){
	 over = s;
	 for(var i=0;i<T;i++){
	 P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
	 P[i].style.color=(i==s)?selected:color;
	 }
	}
	}

	onload = function(){
	P = document.getElementById("menu").getElementsByTagName("a");
	T = P.length;
	for (var i=0;i<T;i++){
	 if(num){
	 x=i+".";
	 if(x.length<3)x="0"+x;
	 P[i].innerHTML = x+P[i].innerHTML;
	 }
	 P[i].style.width = "100%";
	 P[i].onmouseover=new Function("zoom("+i+");");
	}
	zoom(0);
	}
	//-->
	</script>
	</head>

	<body>

	<div id="menu">
	 <a href="http://del.icio.us/tag/scripting">scripting</a>
	 <a href="http://del.icio.us/tag/javascript">javascript</a>
	 <a href="http://del.icio.us/tag/web">web</a>
	 <a href="http://del.icio.us/tag/dhtml">dhtml</a>
	 <a href="http://del.icio.us/tag/css">css</a>
	 <a href="http://del.icio.us/tag/ajax">ajax</a>
	 <a href="http://del.icio.us/tag/programming">programming</a>
	 <a href="http://del.icio.us/tag/design">design</a>
	 <a href="http://del.icio.us/tag/webdesign">webdesign</a>
	 <a href="http://del.icio.us/tag/html">html</a>
	 <a href="http://del.icio.us/tag/dom">dom</a>
	 <a href="http://del.icio.us/tag/webdev">webdev</a>
	 <a href="http://del.icio.us/tag/reference">reference</a>
	 <a href="http://del.icio.us/tag/tools">tools</a>
	 <a href="http://del.icio.us/tag/tutorial">tutorial</a>
	 <a href="http://del.icio.us/tag/xmlhttprequest">xmlhttprequest</a>
	 <a href="http://del.icio.us/tag/menu">menu</a>
	 <a href="http://del.icio.us/tag/xml">xml</a>
	 <a href="http://del.icio.us/tag/library">library</a>
	 <a href="http://del.icio.us/tag/development">development</a>

	</div>
	
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　动态菜单　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)