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

  • 相关阅读:
    psi
    firefox修改语言
    automapper
    堆喷图解
    脱壳系列_0_FSG壳_详细版
    脱壳系列_1_UPX壳_详细版
    算法01-最大子数组详解
    逆向MFC程序
    如何执行shell命令
    Unity之流光效果
  • 原文地址:https://www.cnblogs.com/webdm/p/2073000.html
Copyright © 2011-2022 走看看