js随鼠标移过动态放大的菜单导航

代码简介：

代码内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>js随鼠标移过动态放大的菜单导航_网页代码站(www.webdm.cn)</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="/">scripting</a>
		<a href="/">javascript</a>
		<a href="/">web</a>
		<a href="/">dhtml</a>
		<a href="/">css</a>
		<a href="/">ajax</a>
		<a href="/">programming</a>
		<a href="/">design</a>
		<a href="/">webdesign</a>
		<a href="/">html</a>
		<a href="/">dom</a>
		<a href="/">webdev</a>
		<a href="/">reference</a>
		<a href="/">tools</a>
		<a href="/">tutorial</a>
		<a href="/">xmlhttprequest</a>
		<a href="/">menu</a>
		<a href="/">xml</a>
		<a href="/">library</a>
		<a href="/">development</a>

	</div>

</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>


代码来自：http://www.webdm.cn/webcode/4cb7ae8f-6080-41ee-b5ee-128793c84c04.html

posted @ 2011-06-05 07:48  网页代码站  阅读(455)  评论(0)    收藏  举报