改写一个简单的菜单 弹性大小
改写一个简单的菜单 弹性大小
发布时间:2016-12-30 来源:查字典编辑
摘要:这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数具体实现时,为了不在整个菜单总高度中出现两...

这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑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">scripting</a>

</li>

<li>

<a href="http://del.icio.us/tag/javascript" target="_blank">javascript</a>

</li>

<li>

<a href="http://del.icio.us/tag/web" target="_blank">web</a>

</li>

<li>

<a href="http://del.icio.us/tag/dhtml" target="_blank">dhtml</a>

</li>

<li>

<a href="http://del.icio.us/tag/css" target="_blank">css</a>

</li>

<li>

<a href="http://del.icio.us/tag/ajax" target="_blank">ajax</a>

</li>

<li>

<a href="http://del.icio.us/tag/programming" target="_blank">programming</a>

</li>

<li>

<a href="http://del.icio.us/tag/design" target="_blank">design</a>

</li>

<li>

<a href="http://del.icio.us/tag/webdesign" target="_blank">webdesign</a>

</li>

<li>

<a href="http://del.icio.us/tag/html" target="_blank">html</a>

</li>

<li>

<a href="http://del.icio.us/tag/dom" target="_blank">dom</a>

</li>

<li>

<a href="http://del.icio.us/tag/webdev" target="_blank">webdev</a>

</li>

<li>

<a href="http://del.icio.us/tag/reference" target="_blank">reference</a>

</li>

<li>

<a href="http://del.icio.us/tag/tools" target="_blank">tools</a>

</li>

<li>

<a href="http://del.icio.us/tag/tutorial" target="_blank">tutorial</a>

</li>

<li>

<a href="http://del.icio.us/tag/xmlhttprequest" target="_blank">xmlhttprequest</a>

</li>

<li>

<a href="http://del.icio.us/tag/menu" target="_blank">menu</a>

</li>

<li>

<a href="http://del.icio.us/tag/xml" target="_blank">xml</a>

</li>

<li>

<a href="http://del.icio.us/tag/library" target="_blank">library</a>

</li>

<li>

<a href="http://del.icio.us/tag/development" target="_blank">development</a>

</li>

</ul>

<>

</body>

</html>

演示代码:http://demo.jb51.net/js/caidan/js_caidan.htm

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类