javascript小练习

于 2010-01-09 16:11:06 发布
阅读量130 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery 文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/java_mail_test/article/details/83527242

<html>
    <head>
        <style>
            #leftNavi {
                width:200px;
                height:800px;
                border:solid 1px;
                background-color:black;
            }
            #leftNavi button {
                width:200px;
            }
            #leftNavi .menu {
                position:relative;
                background-color:black;
                color :white;
                font-size:12px;
                text-align:center;
            }
            #leftNavi .menu img {
                display:inline-block;
                margin-top:10px;
                border-width:0px;
            }
            .distance {
                display:inline-block;
            }
            .one_block {
                width:200px;
            }
            .upBtn {
                position:relative;
                left:100px;
                top:50px;
            }
            .downBtn {
                position:relative;
                left:78px;
                top:250px;
            }
            .items {
                overflow:hidden;
                height:300px;
            }
        </style>
        <script>
            function makeBorder(obj) {
                obj.style.width = '30px';
                obj.style.height = '30px';
                obj.style.border = 'solid 1px white';
            }
            function leaveBorder(obj) {
                obj.style.width = '32px';
                obj.style.height = '32px';
                obj.style.border = 'none';
            }
            function moveUp(obj) {
                var top = obj.parentNode.getElementsByTagName('div')[0].scrollTop;
                top = top - 30;
                if(top <= 0) {
                    top = 0;
                }
                obj.parentNode.getElementsByTagName('div')[0].scrollTop = top;
               
            }
           
            function moveDown(obj) {
                var height = obj.parentNode.getElementsByTagName('div')[0].scrollHeight / 2;
                var top = obj.parentNode.getElementsByTagName('div')[0].scrollTop;
                top = top + 30;
               
                if(top >= height) {
                   
                } else {
                    obj.parentNode.getElementsByTagName('div')[0].scrollTop = top;
                }
            }8
           
            window.onload = doOnload;
            function doOnload() {
                var reg = /^menu_\d$/;
                var btns = document.getElementsByTagName('BUTTON');
                for(var i = 0 ; i < btns.length ; i++) {
                    var id = btns[i].id;
                    if(reg.test(id)) {
                        btns[i].onclick = doHideShow;
                    }
                }
                var tmpBtn = document.getElementById('menu_1');
                doHideShow.apply(tmpBtn , []);
            }
           
            function doHideShow() {
                var divReg = /^menu_div_\d$/;
                var id = this.id;
                var num = id.split('_')[1];
                //显示指定的div
                var divs = document.getElementsByTagName('DIV');
                for(var i = 0 ; i < divs.length ; i++) {
                    if(divs[i].id != undefined) {
                        if(divReg.test(divs[i].id)) {
                            var tmpId = divs[i].id.split('_')[2];
                            if(num == tmpId) {
                                divs[i].style.display = 'block';
                            } else {
                                divs[i].style.display = 'none';
                            }
                        }
                    }
                }
            }
        </script>
    </head>
   
    <body>
        <div id="leftNavi">
            <div class="one_block">
               
                <button id="menu_1">分销商库存管理</button>
                <div id="menu_div_1" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)"/><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)"/>
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">分销商库存数量初始化</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">分销商库存初始化确认</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单维护</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单审核</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单抽查</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单复审</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">盘点结果维护</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">盘点结果审核</span><br />
                    </div>
                </div>
               
                <button id="menu_2">分消费管理</button>
                <div id="menu_div_2" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
           
            <button id="menu_3">结账管理</button>
                <div id="menu_div_3" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_4">付款结算管理</button>
                <div id="menu_div_4" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_5">统计报表管理</button>
                <div id="menu_div_5" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_6">基础数据管理</button>
                <div id="menu_div_6" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_7">系统管理</button>
                <div id="menu_div_7" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
            </div>
        </div>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值