网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
R语言
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
网页特效
>> 正文
js鼠标感应标题文字动态放大显示特效
阅读：4018 输入：2016-09-02 10:58:11
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标经过动态放大导航菜单</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://www.youkud.com">youkud.com特效网菜单列表</a> <a href="http://www.youkud.com">youkud.com特效一号</a> <a href="http://www.youkud.com">youkud.com特效二号</a> <a href="http://www.youkud.com">youkud.com特效三号</a> <a href="http://www.youkud.com">youkud.com特效四号</a> <a href="http://www.youkud.com">youkud.com特效五号</a> <a href="http://www.youkud.com">youkud.com特效六号</a> <a href="http://www.youkud.com">youkud.com特效七号</a> <a href="http://www.youkud.com">youkud.com特效八号</a> <a href="http://www.youkud.com">youkud.com特效九号</a> <a href="http://www.youkud.com">youkud.com特效十号</a> <a href="http://www.youkud.com">youkud.com特效十一号</a> <a href="http://www.youkud.com">youkud.com特效十二号</a> <a href="http://www.youkud.com">youkud.com特效十三号</a> </div> </body> </html>
上一篇：
js脚本实现一组数字随机显示特效
下一篇：
带动态时间显示js日历代码
相关阅读
网页字体颜色随机改变效果
用JS查看隐藏的密码框内容
js实现简单的网页计算器（带计算原式）
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens