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


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 表单取值常用代码
Dec 22 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
将list转换为json失败的原因
Dec 17 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
keep-alive保持组件状态的方法
Dec 02 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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python实现的knn算法示例
2018/06/14 Python
Python数据存储之 h5py详解
2019/12/26 Python
python代码实现图书管理系统
2020/11/30 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
保证书范文大全
2014/04/28 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
新手入门Mysql--sql执行过程
2021/06/20 MySQL
python APScheduler执行定时任务介绍
2022/04/19 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL