|
|
看到一个简单的菜单样式，由于是作者比较早的作品，视觉效果不太好，有点突兀自己做了一点小修改，模仿icon动画的效果(区别的关键点是getStyle取得当前计算样式这个函数)
这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑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.jb51.net/js/caidan/js_caidan.htm |
|
发表于 2010-12-2 13:33:02
