Question

我正在使用asp.net c＃开发一个网站。

我有一个加号通过中心到每一边的末尾将整个页面分成4个部分，每个部分都会显示不同的信息。

我想要一些代码，这些代码将从中心开始绘制加号，并在网站主页的页面加载事件的所有四边结束。

我知道它可以通过使用闪存，但我想要一些代码来实现这一点，而不使用闪存可能使用jscript或任何其他方式。我有一个可以帮助http://daneden.github.io/animate.css/的链接，因为我无法实现此链接中给出的代码。

Answer 1

css文件

    #pnlup
    {
        background-color:aqua;
        position:absolute;
        vertical-align:bottom;
        display:none;
        margin-left:47.85%;
        bottom:300px;
        overflow:hidden;
    }

    #pnldown
    {
        position:absolute;
        vertical-align:bottom;
        margin-top:0px;
        margin-left:47.85%;
        bottom:5px;

    }
    #down
    {

        background-color:aqua;
        height: 20px;            

    }
    #down1
    {

        background-color:aqua;
        height: 265px;
        display:none;
        overflow:hidden;
    }
    #pnlleft
    {
        background-color:aqua;
        position:absolute;
        vertical-align:bottom;
        margin-top:0px;
        margin-right:47%;
        bottom:285px;  
        display:none;
        right:55px;

    }
    #pnlright
    {    
        background-color:aqua;          
        position:absolute;
        vertical-align:bottom;
        margin-top:0px;
        margin-left:48.25%;
        bottom:285px;   
        display:none;       
    }
</style>

jscript代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/jscript">
      $(document).ready(function(){
        $('#pnlup').slideDown("slow");
        $('#down1').slideDown("slow");
        jQuery('#pnlright').slideToggleWidth();
        jQuery('#pnlleft').slideToggleWidth1();
    });

    jQuery.fn.extend({
        slideRight: function() {
        return this.each(function() {
        jQuery(this).animate({width: 'show'});
        });
        },
        slideLeft: function() {
            return this.each(function() {
            jQuery(this).animate({width: 'hide'});
        });
        },
        slideRight1: function() {
            return this.each(function() {
            jQuery(this).animate({width: 'hide'});
        });
        },
        slideLeft1: function() {
            return this.each(function() {
            jQuery(this).animate({width: 'show'});
        });
        },
        slideToggleWidth: function() {
            return this.each(function() {
            var el = jQuery(this);
            if (el.css('display') == 'none') {
                el.slideRight();
            } 
            else 
            {
                el.slideLeft();
            }
      });
      },
    slideToggleWidth1: function() {
            return this.each(function() {
            var el = jQuery(this);
            if (el.css('display') == 'none') {
                el.slideLeft1();
            } 
            else 
            {
                el.slideRight1();
            }
    });
    }
    });

html代码

<form id="form1" runat="server">
    <div>
        <asp:Panel ID="pnlup" runat="server" style="width:15px; height:325px;">
        </asp:Panel>
        <asp:Panel ID="pnlleft" runat="server" style="width:695px; height:15px;">
        </asp:Panel>
        <asp:Panel ID="pnlright" runat="server" style="width:695px; height:15px;">
        </asp:Panel>
        <asp:Panel ID="pnldown" runat="server" style="width:15px; height:280px;">
            <div id="down" runat="server"></div>
            <div id="down1" runat="server"></div>
        </asp:Panel>
    </div>
</form>

在asp.net网站上添加动作效果

1 个答案: