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


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 剧场版 你必须知道的javascript
May 27 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
JavaScript类的继承多种实现方法
May 30 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代码技巧的小结
2013/06/02 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python简单分割文件的方法
2015/07/30 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
小学英语教学反思案例
2014/02/04 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
汽车转让协议书范本
2014/12/07 职场文书
新生入学欢迎词
2015/01/26 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
党员证明模板
2015/06/19 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python