静态页面慢慢写还是可以写出来的,主要是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获取,这个网上很多,当然也可以参考我的,(*^__^*) 嘻嘻。
效果图: