仿FLASH动感十足鼠标滑过放大的菜单代码

代码简介:

一款动感十足的仿FLASH菜单,当鼠标滑过菜单某一项的时候,该项会自动变大,其它菜单则减小,如果鼠标滑过的速度很快,那这款菜单就会出现操作感极强的菜单效果,不明白的可运行一下代码便知。

代码内容:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>仿FLASH动感十足鼠标滑过放大的菜单代码_网页代码站(www.webdm.cn)</title>  
<style type="text/css">
	html {
	overflow: hidden;
	}
	body {
	background: #333;
	}
	#menu {
	padding: 10px;
	background: #111;
	height: 298px;
	width: 398px;
	}
	#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://www.webdm.cn">网页代码站</a>
<a href="/">ASP</a>
<a href="/">PHP</a>
<a href="/">.NET</a>
<a href="/">C#</a>
<a href="http://www.webdm.cn">JSP</a>
<a href="/">Java</a>
<a href="/">VC/C++</a>
<a href="/">VB</a>
<a href="/">Delphi</a>
<a href="/">Ajax</a>
<a href="/">脚本资源</a>
<a href="/">电子书籍</a>
<a href="/">方案及文档</a>
<a href="/">工具软件</a>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/accc6ccd-4ca6-4ca4-8b92-ebe64cbb64fc.html

posted @ 2011-03-22 08:45  网页代码站  阅读(348)  评论(0编辑  收藏  举报