ASP.net 表头下拉菜单+带变色效果

 

Default1.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-1.7.1.min.js"></script>
    <title></title>
    <style type="text/css">
        .div1 {
            position: relative;
            width: 100px;
            height: 40px;
            background-color: red;
            margin-left: 5px;
            float: left;
            overflow: hidden;
        }

            .div1 div {
                position: relative;
                top: 40px;
                width: 100px;
                height: 400px;
                background-color: green;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="div1">
            <div id="div1_1"></div>
        </div>
        <div class="div1">
            <div></div>
        </div>
        <div class="div1">
            <div></div>
        </div>
        <div class="div1">
            <div></div>
        </div>
        <div class="div1">
            <div></div>
        </div>
        <div class="div1">
            <div id="div1_2"></div>
        </div>
        <div class="div1">
            <div></div>
        </div>
        <div class="div1">
            <div></div>
        </div>

        <script type="text/ecmascript">
            window.onload = function () {
                var oDivs = document.getElementsByClassName('div1');
                for (var i = 0; i < oDivs.length; i++)
                {
                    oDivs[i].onmouseover = function () {
                        $(this).stop().animate({height:"400px"}, 400);
                    };
                    oDivs[i].onmouseout = function () {
                        $(this).stop().animate({ height: "40px" }, 400);
                    };
                }
            }
        </script>


        <%--<script type="text/javascript">
            //先取出div1们，注册鼠标移入移出事件
            var oDivs = document.getElementsByClassName('div1');

            for (var i = 0; i < oDivs.length; i++)
            {
                oDivs[i].onmouseover = function () { this.style.overflow = 'visible'; };
                oDivs[i].onmouseout = function () { this.style.overflow = 'hidden'; };
            }
            
            
        </script>--%>
    </form>
</body>
</html>

 

 

 

Default2.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js1.js"></script>
    <style type="text/css">
        .div1 {
            position: relative;
            width: 100px;
            height: 40px;
            background-color: red;
            margin-left: 5px;
            float: left;
        }

        #div1_1 {
            position:relative;
            top:40px;
            width:400px;
            height:0px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

    <div class="div1">
            <div id="div1_1"></div>
        </div>

        
    </form>
</body>
</html>

 

 

 

js1.js

 

var speed = 10;

window.onload = function () {
    var oDivs = document.getElementsByClassName('div1');

    for (var i = 0; i < oDivs.length; i++) {
        oDivs[i].onmouseover = function () {
            var aaa = this;
            var timer1 = window.setInterval(function () { Move1(aaa, timer1) }, speed);
        };
    }

    //下拉方法
    function Move1(Div, timer1) {
        Div.onmouseout = function () {
            window.clearInterval(timer1);
            var aaa = this;
            var timer2 = window.setInterval(function () { Move2(aaa, timer2) }, speed);
            Div.getElementsByTagName('div')[0].onmouseover = function () {
                window.clearInterval(timer2);
                var timer3 = window.setInterval(Move3(Div, timer3), speed);
            };
        };
        if (Div.offsetHeight == 400) {
            window.clearInterval(timer1);
            return;
        }
        Div.style.height = Div.offsetHeight + 10 + 'px';
    }

    function Move2(Div, timer2) {
        Div.onmouseover = function () {
            window.clearInterval(timer2)
            var aaa = this;
            var timer1 = window.setInterval(function () { Move1(aaa, timer1) }, speed);
        };
        if (Div.offsetHeight == 40) {
            window.clearInterval(timer2);
            return;
        }
        Div.style.height = Div.offsetHeight - 10 + 'px';
    }

    function Move3(Div,timer3)
    {
        if (Div.offsetHeight == 400) {
            window.clearInterval(timer3);
            return;
        }
        Div.style.height = Div.offsetHeight + 10 + 'px';        
    }

};//onload事件结束

 

posted @ 2016-07-27 15:22  一人饮酒醉(SeVen❤)  阅读(165)  评论(0)  编辑  收藏  举报