改写一个简单的菜单 弹性大小


Posted in Javascript onDecember 02, 2010

这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数

具体实现时,为了不在整个菜单总高度中出现两个波峰而产生突兀感,事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数,这里我简单设为了一个常量 。

完整的代码为

<html> 
<head> 
<title>menu list</title> 
<style type="text/css"> 
html { 
overflow: hidden; 
} 
body { 
background-color: #111111; 
color: #eee; 
} 
ul#menu { 
position: absolute; 
left: 40%; 
} 
li { 
list-style: none; 
padding: 0px; 
margin: 1px; 
} 
a { 
text-decoration: none; 
font-family: arial, helvetica, verdana, sans-serif; 
color: #fff; 
font-size: 20px; 
} 
</style> 
<script type="text/javascript"> 
var menu = function(){ 
var $ = function(o){ 
return document.getElementById(o); 
} 
var words = document.getElementsByTagName('a'); 
var size; //当前字体大小 
var od;//指示是否为同一目标 
var max_size = 40, min_size = 20;//最大字体与最小字体 
var go = 0;//go指示根据指针方位的动画 ,dT指示指针是否在移动 
var xm, xmb, ym, ymb;//指针运动与判定 
/*入库*/ 
var addEvent = function(o, e, f){ 
if (window.addEventListener) { 
o.addEventListener(e, f, false); 
} 
else 
if (window.attachEvent) { 
o.attachEvent('on' + e, f); 
} 
else { 
return false; 
} 
} 
var pxTop = function(o){//获取元素相对整个文档的y位置 
return o.offsetParent ? o.offsetTop + pxTop(o.offsetParent) : o.offsetTop; 
} 
addEvent(document, 'mousemove', function(e){ 
e = e || window.event; 
ym = (e.clientY || e.y) + document.body.scrollTop; 
if (ym != ymb) { 
ymb = ym; 
} 
od = e.target ? e.target : (e.srcElement ? e.srcElement : null); 
}) 
var getStyle = function(elem, name){ 
if (elem.style[name]) { 
return elem.style[name]; 
} 
else 
if (elem.currentStyle) { 
return elem.currentStyle[name]; 
} 
else 
if (document.defaultValue && document.defaultValue.getComputedStyle) { 
name = name.replace(/([A-Z])/g, "-$1"); 
nmae = name.toLowerCase(); 
var s = document.defaultValue.getComputedStyle(elem, name); 
return s ? s : null; 
} 
else 
return null; 
} 
var test = function(){ 
for (var i = 0; i < words.length; i++) { 
var p = words[i]; 
size = parseInt(getStyle(p, "fontSize")); 
if (od && od.className == "move") { 
if (p != od) { 
p.style.color = "white"; 
} 
p.style.fontSize = Math.max(go * Math.cos((ym - pxTop(p)) / (3 * max_size)), min_size) + "px"; 
od.style.color = "yellow"; 
if (go <= max_size) { 
go = go + 0.05; 
} 
} 
else { 
if (go >= min_size) { 
go = go - 0.05; 
} 
p.style.fontSize = (Math.max(size - 0.05, min_size)) + "px"; 
p.style.color = "white"; 
} 
} 
} 
return { 
test: test 
} 
}() 
window.onload = function(){ 
setInterval(menu.test, 16) 
} 
</script> 
</head> 
<body> 
<ul id="menu"> 
<li> 
<a href="http://del.icio.us/tag/scripting" target="_blank" class="move">scripting</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/javascript" target="_blank" class="move">javascript</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/web" target="_blank" class="move">web</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/dhtml" target="_blank" class="move">dhtml</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/css" target="_blank" class="move">css</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/ajax" target="_blank" class="move">ajax</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/programming" target="_blank" class="move">programming</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/design" target="_blank" class="move">design</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/webdesign" target="_blank" class="move">webdesign</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/html" target="_blank" class="move">html</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/dom" target="_blank" class="move">dom</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/webdev" target="_blank" class="move">webdev</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/reference" target="_blank" class="move">reference</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/tools" target="_blank" class="move">tools</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/tutorial" target="_blank" class="move">tutorial</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/xmlhttprequest" target="_blank" class="move">xmlhttprequest</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/menu" target="_blank" class="move">menu</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/xml" target="_blank" class="move">xml</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/library" target="_blank" class="move">library</a> 
</li> 
<li> 
<a href="http://del.icio.us/tag/development" target="_blank" class="move">development</a> 
</li> 
</ul> 
<!-- <h1 id="test">a</h1> --> 
</body> 
</html>

演示代码:http://demo.3water.com/js/caidan/js_caidan.htm
Javascript 相关文章推荐
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 #Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 #Javascript
JQuery 弹出框定位实现方法
Dec 02 #Javascript
Jquery replace 字符替换实现代码
Dec 02 #Javascript
jquery json 实例代码
Dec 02 #Javascript
JavaScript格式化数字的函数代码
Nov 30 #Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
用PHP+MySql编写聊天室
2006/10/09 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jQuery hover 延时器实现代码
2011/03/12 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python多进程同步简单实现代码
2016/04/27 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
numpy自动生成数组详解
2017/12/15 Python
django_orm查询性能优化方法
2018/08/20 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
详解python读取image
2019/04/03 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
pytorch之添加BN的实现
2020/01/06 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
python如何爬取动态网站
2020/09/09 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
校园创业策划书
2014/01/14 职场文书
物流专员岗位职责
2014/02/17 职场文书
招聘专员岗位职责
2014/03/07 职场文书
自考生自我评价
2019/06/21 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
如何利用python创作字符画
2022/06/25 Python