[js项目]封装库-下拉菜单

封装库-下拉菜单

本篇，我们主要探讨一下博客网站顶部下拉菜单的制作，其中会用到几个知识点，鼠标移入移出的 hover()方法、隐藏和显示方法 hide()和 show()。

一． 界面设计

创建一个顶部 header 局域，放入 logo 和个人中心，然后制作一个下拉菜单。

颜色参数：背景色：FBF7E1、移入背景色：FFCC00

二． 设置效果

创建下来菜单，我们第一步需要把完整的显示界面搭建起来。第二步，考虑需要隐藏的部分。最后通过鼠标移入显示隐藏部分，然后移出继续隐藏。

//设置隐藏
Base.prototype.hide = function () {
    for (var i = 0; i < this.elements.length; i ++) {
        this.elements[i].style.display= 'none';
    }
    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.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;
}

最后我们需要对“个人中心”本身使用 this 调用的时候，需要对类库的构造部分进行扩展。

//前台调用
var $ = function (_this) {
    return new Base(_this);
}

//基础库
function Base(_this) {
    this.elements = [];
    if(_this != undefined) { //这里需要判断 undefined 的对象
        this.elements[0] = _this;
    }
}

//前台调用部分
$().getClass('member').hover(function () {
    $(this).css('background','url(images/arrow2.png) no-repeat 55px center');
    $().getClass('ul').show();
}, function () {
    $(this).css('background','url(images/arrow.png) no-repeat 55px center');
    $().getClass('ul').hide();
});