主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
R语言
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
js鼠标感应标题文字动态放大显示特效
2016-09-02
网页编程网
网页编程网
<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>
阅读原文
阅读
4134
123
显示电脑版