JS特效之鼠标滑动导航条

前段时间在写JS专栏，看完了，但是博客没写多少，但是今天晚上想写点想写的代码，手痒了，嘿嘿。看到网上有一个我喜欢的导航（那个博客中是HTML5+CSS3写的，但是下载人家的要给钱，后来想想，为什么不自己写一个呢，所以就开动了）。

         静态页面慢慢写还是可以写出来的，主要是JS那点效果，也不怕笑，JQuery用多了，对原生JS真的不是很了解，不过没事，慢慢学习，相信会很快都熟悉的。

一.   目录结构：





二.   静态页面代码：









HTML和CSS讲解：

源代码不能完全代表文章，下面解释一下关键的两处：

1.      整个布局参考《天龙八部》游戏的导航，使用ul和li元素

2.      布局上主要问题会出现在如下几个方面

a)        li中文字上下对齐èline-height:和height一样

b)        li中文字左右对ètext-align:center;

c)        在ie7下解决上下滚动条问题，引起问题的原因如下：

chrome、firefox会初始付值给html{overflow:visible;}

IE6 初始付值html{overflow-x:auto;overflow-y:scroll;}

IE7 初始付值html{overflow-x:visible;overflow-y:scroll;}

只有dom根结点（也就是html根节点）设置html{overflow:visible;}的时候，浏览器才会将body元素中的overflow值应用到视图区。

所以在CSS中会有：

html {

    overflow: visible;

}

三.   JS脚本





JS讲解：

其实写动态控制效果并不是很难，原生态的JS难在兼容性和特殊情况的处理。

难点有如下几点：

1.      首先，判断IE版本，这个我只做了简单的判断，不难，网上一抓一大把

2.      添加事件：

a)        IE支持的是：attachEvent第一个参数要加”on”，这是和其他浏览器不一样的；

b)        FF，Chrome等浏览器支持的是：addEventListener（其实紧紧是IE奇葩，本来就该支持这个），第一个参数要求不能加”on”。

3.      this关键字：

a)        在函数onChangeByMouseOver(this)和onChangeByMouseOut(this)中的this代表对象，在IE和其他浏览器中有差异；

b)        IE代表[Objectwindow]，所以处理要使用：

var _srcObj = _this.event.srcElement ?_this.event.srcElement : _this.event.target;

这里使用三元式是常用方法，大家可以参考。

c)        FF，Chrome等浏览器代表当前的源元素DOM，所以直接用。

4.      DOM样式的改变

a)        IE支持setAttribute，而且参数必须是(’style’,cssText);

b)        FF,Chrome等浏览器支持document.getElementById('content').style.cssText这种写法，不然你会发现你的方法还是可以执行一次，但是没有动态的效果

c)        class获取，这个网上很多，当然也可以参考我的，(*^__^*) 嘻嘻。

效果图：