使用scrollDoor插件制作jQuery滑动门效果

什么是scrollDoor

scrollDoor是JS已经封装好的滑动门插件,这个插件只需要调用并传入正确的参数就可以使用。

关键代码与解析

    function scrollDoor() {//定义scrollDoor方法
    }
    scrollDoor.prototype = { //实例化
        sd: function (menus, divs, openClass, closeClass) { //定义成员 sd 设置参数
            var _this = this;
            //判断菜单层数量和内容层数量
            if (menus.length != divs.length) {
                alert("菜单层数量和内容层数量不一样!");
                return false;
            }
            //for循环菜单层数量
            for (var i = 0; i < menus.length; i++) {
                _this.$(menus[i]).value = i;

                //定义菜单层鼠标浏览方法
                _this.$(menus[i]).onmouseover = function () {
                    //for循环菜单层数量
                    for (var j = 0; j < menus.length; j++) {
                        //首先定义所有菜单css名字
                        _this.$(menus[j]).className = closeClass;
                        //并且隐藏所有的内容层
                        _this.$(divs[j]).style.display = "none";
                    }
                    //定义当前菜单css名字
                    _this.$(menus[this.value]).className = openClass;
                    //显示对应的内容层
                    _this.$(divs[this.value]).style.display = "block";
                }
            }
        },
        $: function (oid) {
            if (typeof (oid) == "string")
                return document.getElementById(oid);
            return oid;
        }
    }
    window.onload = function () {
        //定义一个scrollDoor()参数
        var SDmodel = new scrollDoor();
        //调用.sd方法() 并赋予参数
        SDmodel.sd(["m01", "m02", "m03", "m04"], ["c01", "c02", "c03", "c04"], "sd01", "sd02");
    }