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 @   网页代码站  阅读(445)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
阅读排行：
· “你见过凌晨四点的洛杉矶吗？”--《我们为什么要睡觉》
· 编程神器Trae：当我用上后，才知道自己的创造力被低估了多少
· C# 从零开始使用Layui.Wpf库开发WPF客户端
· C#/.NET/.NET Core技术前沿周刊 | 第 31 期（2025年3.17-3.23）
· 接口重试的7种常用方案！
点击右上角即可分享
微信分享提示