zoukankan      html  css  js  c++  java
  • 仿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;
    	 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

  • 相关阅读:
    Jdbc 事务
    Spring
    【Java集合的详细研究1】Collections类常用方法总结
    Java Number类
    Java中值类型和引用类型的区别
    Java常量池的理解
    Java重写与重载之间的区别
    Java中Animal b = new Dog();Dog c = new Dog();的区别
    java类构造器的理解
    Javascript history pushState onpopstate方法做AJAX SEO
  • 原文地址:https://www.cnblogs.com/webdm/p/1990951.html
Copyright © 2011-2022 走看看