zoukankan html css js c++ java

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;
             100px;
            height: 40px;
            background-color: red;
            margin-left: 5px;
            float: left;
            overflow: hidden;
        }

            .div1 div {
                position: relative;
                top: 40px;
                 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;
             100px;
            height: 40px;
            background-color: red;
            margin-left: 5px;
            float: left;
        }

        #div1_1 {
            position:relative;
            top:40px;
            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事件结束

查看全文

相关阅读:
LeetCode 231. 2的幂
 LeetCode 50. Pow(x, n)
LeetCode 80. 删除有序数组中的重复项 II
LeetCode 26. 删除有序数组中的重复项
 LeetCode 88. 合并两个有序数组
 LeetCode 781. 森林中的兔子
 在linux下使用 Fitilink 3D Webcam (18e3:5031)
ros tf2使用示例
 使用QtCreator作为ROS调试器
 linux基于file的logger

原文地址：https://www.cnblogs.com/suiyuejinghao123/p/5711322.html