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


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 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
js随机颜色代码的多种实现方式
2013/04/23 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
专家推荐信范文
2015/03/26 职场文书
警示教育片观后感
2015/06/17 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python