效果：鼠标放上去会出现一个下拉的菜单。
首先文件有index.css,index.js,index.html base.js 先把界面做出来。
1、在index.html里面添加
<body>
<div id=”header”>
<div class=”logo”><img src=”images/logo.gif” alt=””/></div>
<div class=”member”>个人中心</div>
</div>
</body>
效果如下：
2、然后我们的css先这么写：
body{
margin:0;
//记住要写分号，不然出不来效果，我试过
padding:0;
//内外边距先设为0。
background:url(images/header_bg.png) repeat-x;
//加了一个往x轴展开的背景
front-size:12px;
color:#333；
}
就变成这样了：
我做了一个实验，发现那个背景图片repeat-x 就是不断复制展开的
然后是
#header{
Width:900px;
Height:30px;
Margin:0 auto;
//margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right, 0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
}
#header.log{/
/log这个图片
Width:100px;
Height:30px;
Float:left;
}
#header.logo img{
//图片本身是内联块
Display:block;
}
#header.member{
Width:70px;
Height:30px;
Line-height:30px;
Float:right;
//右对齐
//Background:red url(images/arrow.png)no-repeat right center;//可以先加个背景颜色看它到底在哪里
这里可能那个右箭头不是很好控制位置，还可以用像素来调。
Background: url(images/arrow.png)no-repeat 55px center;
//从左边向右边移55个像素。
Cursor:pointer;
//加一个手型，这样它放上去就是个手
}
3、接下来回到index.html继续编辑那个下拉菜单。
<div class="member">个人中心
<ul>
<li><ahref="###">设置</a></li>
<li><ahref="###">换肤</a></li>
<li><ahref="###">帮助</a></li>
<li><ahref="###">退出</a></li>
</ul>
</div>
然后看一下，它会非常乱，然后要回到css里面去调试一下。
Ul{
Padding:0;
//把它的行内边距全部去掉
Margin:0;
}
Ul li{
List-style-type:none;
//把小圆点去掉
}
#header ul{
Position:absolute;
//绝对定位
Top:30px;
Left:500px;
}
然后效果就是在中间的那里：
然后就继续编辑#header ul
#header ul{
Position:absolute
;//绝对定位
Top:30px;
Left:500px;
Background:#FBF7E1;
Width:100px;
//就是弄一个区域
Height:120px;
Border:1px solid #999;
//就是给它弄一个边框
Border-top:none;
//上面不用边框
Padding:10px 0 0 0;
//这样整体就会下来一点
}
padding:10px 5px 15px 20px;
• 上内边距是 10px
• 右内边距是 5px
• 下内边距是 15px
• 左内边距是 20px 效果：
然后我们就要来处理一下那个字了，往css里面继续添加规则
#header ul li{
Height:25px;
Line-height:25px;
Text-indent:20px;
Letter-spacing:1px;
//把字再分一下
} 这样的绝对定位会有问题的，如果说把窗口缩小的话，这个ul整个框就会偏移一些。
下面给这些字做上超链接：
<li><a href=”###”>设置</a></li>
然后再给a写一下css规则
#header ul li a{
Display:block;
//保障和上面一样大
Text-decoration:none;
//没有下划线
Color:#333;
//字体颜色
Background:url(images.arrow3.gif) no-repeat 5px 45%;
//只显示一个图片
}
而且我要它鼠标放上去字体颜色要变：
#header ul li a:hover{
Background:#fc0 url(images.arrow4.gif) no-repeat 5px 45%;
//换成那个黑色的图片
}
效果如下：
然后这个下拉菜单我们是需要先隐藏的：加上一句display:none;
#header ul{
Position:absolute;
//绝对定位
Top:30px;
Left:500px;
Background:#FBF7E1;
Width:100px;
//就是弄一个区域
Height:120px;
Border:1px solid #999;
//就是给它弄一个边框
Border-top:none;
//上面不用边框
Padding:10px 0 0 0;
这样整体就会下来一点
display:none;
}如果我的鼠标放在个人中心那个位置的时候它就要显现：
那么现在就要转移到index.js里面了
Window.οnlοad=function(){
$().getClass(‘member’).hover(function(){alert(‘show’);},function(){alert(‘hide’);}){
}
}
但是这时候hover方法不存在，所以要转移到base.js里面设置。
Base.prototype.hover=function(over,out)
{
For(var i0;i<this.elements.length;i++)
{this.elements[i].οnmοuseοver=over;
This.elements[i].οnmοuseοut=out;}
Return this;
};
这个时候你就会发现你鼠标一放上去就会跳出show，回车以后离开会跳出Hide.这样就成功了，其实,所以接下来我要改之前传进去的那个over和out。
Window.οnlοad=function(){
$().getClass(‘’member).hover(function(){
$().getTagName(‘ul’).show();
//这个就是获取到ul对象
},function(){$().getTagName(‘ul’).hide();}
}
所以要再写show和hide方法。
Base.prototype.show=function(){
For(var i=0;i<this.elements.length;i++)
{this.elements[i].style.display=’block’;}
Return this;
}
Base.prototype.hide=function(){
For(var i=0;i<this.elements.length;i++)
{this.elements[i].style.display=’none’;}
Return this;
}
然后就成功了啦，但是你会发现，我们本来放在上面横向应该是可以离开的没错，但是纵向移下来的时候应该要可以保留才对。
因为我们之前只是，选择了那个div member对象，它的区域本来就是我的中心那么大而已。所以我们要想本来写的<ul></ul>放到<div class=”member”>个人中心<ul><li></li></ul></div>里面去，这样就可以了。
4、现在剩最后一个小点，鼠标放上去变成一个小图片向上的小三角，拿走又变成另一个小三角图片向下的小三角。
$().getClass(‘member’).css(‘background’,url(images/arrow2.png)no-repeat 55px ceter);放进那个第一个传的函数里面，和show并存。
老师为了让它不那么麻烦，可以写成
$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
$().getTagName('ul').show();
又改装了一下前面的base代码:
var $ = function (_this) {
return new Base(_this);
}
function Base(_this) {
this.elements = [];
if (_this != undefined) {
//_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的'undefined'
this.elements[0] = _this;
}
}
这里附上base.js的代码：
//前台调用
var $ = function (_this) {
return new Base(_this);
}
//基础库
function Base(_this) {
//创建一个数组，来保存获取的节点和节点数组
this.elements = [];
if (_this != undefined) { //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的'undefined'
this.elements[0] = _this;
}
}
//获取ID节点
Base.prototype.getId = function (id) {
this.elements.push(document.getElementById(id));
return this;
};
//获取元素节点数组
Base.prototype.getTagName = function (tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i ++) {
this.elements.push(tags[i]);
}
return this;
};
//获取CLASS节点数组
Base.prototype.getClass = function (className, idName) {
var node = null;
if (arguments.length == 2) {
node = document.getElementById(idName);
} else {
node = document;
}
var all = node.getElementsByTagName('*');
for (var i = 0; i < all.length; i ++) {
if (all[i].className == className) {
this.elements.push(all[i]);
}
}
return this;
}
//获取某一个节点
Base.prototype.getElement = function (num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
};
//设置CSS
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 1) {
if (typeof window.getComputedStyle != 'undefined') {//W3C
return window.getComputedStyle(this.elements[i], null)[attr];
} else if (typeof this.elements[i].currentStyle != 'undeinfed') {//IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
}
//添加Class
Base.prototype.addClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (!this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))) {
this.elements[i].className += ' ' + className;
}
}
return this;
}
//移除Class
Base.prototype.removeClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))) {
this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' +className +'(\\s|$)'), ' ');
}
}
return this;
}
//添加link或style的CSS规则
Base.prototype.addRule = function (num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != 'undefined') {//W3C
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') {//IE
sheet.addRule(selectorText, cssText, position);
}
return this;
}
//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != 'undefined') {//W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') {//IE
sheet.removeRule(index);
}
return this;
}
//设置innerHTML
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 0) {
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}
//设置鼠标移入移出方法
Base.prototype.hover = function (over, out) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onmouseover = over;
this.elements[i].onmouseout = out;
}
return this;
};
//设置显示
Base.prototype.show = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'block';
}
return this;
}
//设置隐藏
Base.prototype.hide = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
return this;
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
