Question

我想向上/向下滑动顶部div并向左/向左滑动div。当左侧或顶部DIV滑入/滑出时，应在屏幕上调整中心内容。我已经写了相同的代码。但是当我向左滑动div时，中心内容会下降片刻。更多代码在所有浏览器中都不能很好地工作。在IE浏览器中，当我滑动顶部DIV时，内容不会调整大小，但如果我先滑动顶部div然后向左滑动div，它可以正常工作。以下代码需要进行哪些更改才能在所有浏览器中正常运行？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="JQuery.js"></script>
<script src="JQuery-UI.js"></script>

<title></title>
<style type="text/css">
    .form
    {
        margin: 0;
        padding: 0;
        display: inline;
    }

    body
    {
        height: 100%;
        position: relative;
        font-family: Verdana;
        margin: 0;
        padding: 0;
    }

    .topDiv
    {
        display: block;
        background-repeat: repeat;
        background-image: url('../Images/HeaderLogoBackground.png');
        width: 100%;
        background-color: #7AB800;
        height: 108px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("#showHideTopDiv").click(function () {
            if (!$('#topDiv').hasClass("off")) {
                $('#topDiv').animate({ 'margin-top': '-108px' }, 500);
                $('#topDiv').addClass("off");
                $('#divContent').animate({ 'height': '890px' }, 500);

            }
            else {
                $('#topDiv').animate({ 'margin-top': '0px' }, 500);
                $('#topDiv').removeClass("off");
                $('#divContent').animate({ 'height': '780px' }, 500);
            }
        });

        $('#divSideSlider').click(function () {
            if (!$('#sidebar').hasClass("off")) {
                $('#sidebar').animate({ 'margin-left': '-10%' },500);
                $('#sidebar').addClass("off");
                $('#divReportContent').animate({ 'margin-left': '0.0%', 'width': '99.5%' }, 500);
            }
            else {
                $('#sidebar').animate({ 'margin-left': '0.0%' },500);
                $('#sidebar').removeClass("off");
                $('#divReportContent').animate({ 'margin-left': '0.0%', 'width': '89.5%' }, 500);
            }
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server" class="form">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="topDiv" class="topDiv">
        <div style="float: left;">
            <img src="Images/Background.png" />
        </div>
        <div style="float: right;">
            user detail
        </div>
    </div>
    <div id="showHideTopDiv" style="height: 10px; background-color: #E5E4E2; display: block; color: #E5E4E2;">
    </div>
    <div id="divContent" style="height: 780px;margin:0px;padding:0px;">
        <div style="float: left; background-color: red; width: 10%; height: inherit;margin:0px;padding:0;display:block;" id="sidebar">

        </div>
        <div style="background-color: #E5E4E2; height: inherit; width: 0.5%; float: left;margin:0px;padding:0;display:block;" id="divSideSlider">
        </div>
        <div style="float:left;width:89.5%;background-color:aqua;height:inherit;margin:0px;padding:0;display:block;" id="divReportContent">

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

Answer 1

尝试使用DHTMLX Layouts或Jquery UI ..这样可以非常顺利地滑动DIV ......或者使用任何其他Widjet库... Click here JQUERY UI

在没有太多编码的情况下，你可以使用很多效果

enter image description here

使用JQuery滑动DIV并调整内容大小

1 个答案: