在 asp.net 网站中添加运动效果答案

【问题标题】：Adding motion effect in asp.net website在 asp.net 网站中添加运动效果
【发布时间】：2014-02-06 07:31:13
【问题描述】：

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

我有一个加号从中心到每一边的末尾将整个页面分为 4 个部分，每个部分将显示一些不同的信息。

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

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

【问题讨论】：

SO 问题通常需要一些您迄今为止尝试过的代码示例 stackoverflow.com/questions/how-to-ask 。你的问题太笼统了，画十字的方法有很多，你可以加载一张图片，你可以画一个网格，只给中间线加阴影....

标签： c# asp.net jscript

【解决方案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>

脚本代码

<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>

【讨论】：