javascript+css鼠标移过放大的JS动态菜单

分类 : 代码案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>www.css5.net</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>

<p>查找更多代码,请访问:<a href="http://www.css5.net" target="_blank">CSS5.NET</a></p>

</body>

</html>


分类: 代码案例  发布: 2019-07-18-星期四   访问() .NET技术    Web前端    JAVA开发    语言编程    数据库    电脑知识    代码案例

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved