改写一个简单的菜单 弹性大小
程序员文章站
2022-05-27 09:22:25
这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3d菜单的形式,我简单采用了余弦函数 具体实现时，为了不在整个菜单总高度中出现两个波峰而产生突兀感，事实上co...
这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑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>
演示代码：
具体实现时，为了不在整个菜单总高度中出现两个波峰而产生突兀感，事实上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>
演示代码：