树型二级菜单特效

原创 2007年09月25日 15:15:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CMenu3</title>
<style type="text/css">
#CMenu3 {
    width:160px;
    background-color:#F6F6F6;
    padding:1px 10px 10px 10px;
    *padding:11px 10px 10px 10px;
}

#CMenu3 div {
    font-weight:bold;
    font-size:14px;
    height:24px;
    line-height:24px;
    overflow:hidden;
    border:#CCCCCC 1px solid;
    padding-left:10px;
    margin-top:10px;
}

#CMenu3 ul {
    margin:0px;
    padding:0px;
    list-style:none;
    height:0px;
    overflow:hidden;
    background-color:#EBEBEB;
}

#CMenu3 li {
    font-size:12px;
    margin-left:10px;
    line-height:20px;
    height:20px;
    overflow:hidden;
}
</style>
<script type="text/javascript">
var Class = {
//创建类
    create : function () {
        return function () {
            this.initialize.apply(this, arguments);
        };
    }
};

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var $A = function (a) {
//转换数组
    return a ? Array.apply(null, a) : new Array;
};

Function.prototype.bind = function () {
//绑定事件
    var wc = this, a = $A(arguments), o = a.shift();
    return function () {
        wc.apply(o, a.concat($A(arguments)));
    };
};

Object.extend = function (a, b) {
//追加方法
    for (var i in b) a[i] = b[i];
    return a;
};

Object.extend(Object, {

    addEvent : function (a, b, c, d) {
    //添加函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }
       
        if (a.attachEvent) a.attachEvent($ni, c);
        else a.addEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    },
   
    delEvent : function (a, b, c, d) {
    //删除函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }
       
        if (a.detachEvent) a.detachEvent($ni, c);
        else a.removeEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    }
   
});

var CMenu3 = Class.create();

CMenu3.prototype = {
   
    initialize : function (object, height, num) {
    //初始化参数
        var wc = this;
        wc.menu = object;
        wc.body = { title : [], content : [] };
        wc.status = { "height" : height, "num" : num, i : 0, ing : false };
        wc.temp = {};
        wc.init();
    },
   
    init : function () {
    //加载
        var wc = this, body = wc.body, nodes = wc.menu.childNodes, i = 0;
       
        for (; i < nodes.length ; i ++) {
            if (nodes[i].nodeType != 1) continue;
           
            if (nodes[i].tagName == "DIV") {
                Object.addEvent(body.title[body.title.length] = nodes[i], "onclick", wc.click.bind(wc, body.title.length - 1));
            } else if (nodes[i].tagName == "UL") (body.content[body.content.length] = nodes[i]).status = {
                num : 1
            };
        }
        if (body.content[0]) with (body.content[0].style) { height = "240px", overflow = "auto"; }
    },
   
    click : function (i) {
    //点击
        var wc = this, title = wc.body.title, content = wc.body.content;
       
        if (i == wc.status.i) return;
        content[i].status.num = 1
        content[wc.status.i].status.num = -1;
       
        if (!wc.temp[i]) wc.temp[i] = true;
        if (!wc.temp[wc.status.i]) wc.temp[wc.status.i] = true;
       
        if (!wc.status.ing) { wc.status.ing = true, wc.effect(); }
        wc.status.i = i;
    },
   
    effect : function () {
    //变化
        var wc = this, n = wc.status.height / wc.status.num, temp = wc.temp, content, status, i;
        //嘿嘿,偷懒这个没控制。。就是说。。。显示的高度和变化次数必须可以整除。。
       
        for (i in temp) {
            content = wc.body.content[i], status = content.status, num = content.offsetHeight + n * status.num;
            if (num <= wc.status.height && num >= 0) {
                content.style.height = num + "px";
            } else {
                content.style.overflow = "auto", delete temp[i];
            }
        }
       
        if (i) window.setTimeout(function () { wc.effect(); }, 10);
        else wc.status.ing = false;
    }
   
}

Object.addEvent(window, "onload", function () {
    var wc = new CMenu3($("CMenu3"), 240, 3);
});

</script>
</head>
<body>
<!--二级菜单 开始-->
<div id="CMenu3">
    <div>大类1</div>
    <ul>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
    </ul>
    <div>大类2</div>
    <ul>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
        <li>·&nbsp;4</li>
        <li>·&nbsp;5</li>
    </ul>
    <div>大类3</div>
    <ul>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
        <li>·&nbsp;4</li>
        <li>·&nbsp;5</li>
        <li>·&nbsp;6</li>
        <li>·&nbsp;7</li>
        <li>·&nbsp;8</li>
        <li>·&nbsp;9</li>
        <li>·&nbsp;0</li>
        <li>·&nbsp;1</li>
        <li>·&nbsp;2</li>
        <li>·&nbsp;3</li>
        <li>·&nbsp;4</li>
        <li>·&nbsp;5</li>
        <li>·&nbsp;6</li>
        <li>·&nbsp;7</li>
        <li>·&nbsp;8</li>
        <li>·&nbsp;9</li>
    </ul>
</div>
<!--二级菜单 结束-->
</body>
</html> 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

DIV+CSS+JS二级树型菜单

DIV+CSS+JS二级树型菜单,展开后刷新无影响

DIV+CSS+JS二级树型菜单,展开后刷新无影响 <!-- body { font-family: arial, 宋体, serif; font-size:12px; } * { margin:0...

一款带动画效果的经典二级导航菜单Jquery特效

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 一款带动画效果的经典二级导航菜单Jquery特效 ...

导航下拉二级菜单特效

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 兼容多种浏...

JS省市二级联动网页特效菜单

-www.51windows.Net      body{ font-size: 14px }            var where = new Array(35);   fu...

树型动态菜单

  • 2015-08-02 09:19
  • 25KB
  • 下载

jQuery 树型菜单插件(Treeview)

jQuery 树型菜单插件(Treeview) jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。试用于一些菜单的导航,支持基于 cookie 的持久性菜单。 i...

非常酷的各种树型菜单

  • 2006-02-23 09:05
  • 85KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)