[十万火急]js脚本实现导航条效果小状况


var Floaters = {
delta: 0.08,
queue: null,
collection: {},
items: [],
addItem: function(Obj,left,top,ani){
Obj.style['top'] = top + 'px';
Obj.style['left'] = left + 'px';
var newItem = { object:Obj, oLeft:left, oTop:top };
this.items[this.items.length] = newItem;
this.delta = ani ? ani : this.delta;
},
sPlay: function()
{
this.collection = this.items;
this.queue = setInterval('play()',10);
}
}function checkStandard(){
var scrollY;
if (document.documentElement && document.documentElement.scrollTop)
{
scrollY = document.documentElement.scrollTop;
}
else if (document.body)
{
scrollY = document.body.scrollTop;
}
return scrollY;
}function play()
{
var diffY = checkStandard();
for(var i in Floaters.collection)
{
var obj = Floaters.collection[i].object;
var obj_y = Floaters.collection[i].oTop;
var total = diffY + obj_y;
if( obj.offsetTop != total)
{
var oy = (total - obj.offsetTop) * Floaters.delta;
oy = ( oy>0?1:-1 ) * Math.ceil( Math.abs(oy) );
obj.style['top'] = obj.offsetTop + oy + 'px';
}else
{
clearInterval(Floaters.queue);
Floaters.queue = setInterval('play()',10);
}
}
}
上边是我在网上找的一小段js脚本,
其功能原本应该为:
1.将导航链接为<ui><li>xxxx</li></ui>格式的形式重新横向排布
2.未选中的按钮为:深蓝色底色+白色字体
3.以选中的按钮为:白色底色+深蓝色字体
4.鼠标移入时 见效果3
5.鼠标移出时 见效果2效果很简单 只不过小弟太笨 初学乍道,学业不精 在线100分!希望各位大侠多多赐教
另:小弟很笨,听不懂思路,直接贴上完整且正确代码,小弟在线等,立即给分,绝不平均分给其他人
注*: 要按照上边5个要求,一定要正确的,其他的脚本小弟不想要 谢谢了!

解决方案 »

  1.   

    代码看不懂！不过楼主说的功能好像用CSS能实现，帮你顶下吧，等解释的到位！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
    ul li{list-style-type:none;
    float:left;
    margin-left:10px;
    font-size:30px;
    padding:3px;
    } a:link{
    color:#FFFFFF;
    background-color:blue;
    text-decoration:none;
    } a:visited {
    background-color:#FFFFFF;
    color:blue;
    text-decoration:none;
    } a:hover {
    background-color:#FFFFFF;
    color:blue;
    text-decoration:none;
    }
      </style>
     </HEAD> <BODY>
      <ul>
      <li><a href="#">xxxx</a></li>
      <li><a href="#">xxxx</a></li>
      <li><a href="#">xxxx</a></li>
      </ul>
     </BODY>
    </HTML>