Fatal编程技术网
  • javascript/
  • Javascript 如何使用两行作为背景，一行带有幻灯片，下一行带有图像？

Javascript 如何使用两行作为背景，一行带有幻灯片，下一行带有图像？

javascript jquery css visual-studio-2013

Javascript 如何使用两行作为背景，一行带有幻灯片，下一行带有图像？,javascript,jquery,css,visual-studio-2013,Javascript,Jquery,Css,Visual Studio 2013,我正在使用Visual Studio 2013 Ultimate创建一个web应用程序 对于主页，我希望重新创建与以下模板类似的效果： 我曾多次尝试在第一行实现固定标题，第二行有一个幻灯片作为背景，第三行有一个简单的补充图像作为背景。第二行和第三行一起提供了一个背景，动画选项卡可以在精确的位置滑入 到目前为止，我已经实现了一个幻灯片，延伸到整个页面，一个固定的标题 问题1：无法将选项卡放置在行的底部。如图所示，当前位置以颜色显示，黑色方框是我想要选项卡的位置 导致此问题的代码： <

我正在使用Visual Studio 2013 Ultimate创建一个web应用程序

对于主页，我希望重新创建与以下模板类似的效果：

我曾多次尝试在第一行实现固定标题，第二行有一个幻灯片作为背景，第三行有一个简单的补充图像作为背景。第二行和第三行一起提供了一个背景，动画选项卡可以在精确的位置滑入

到目前为止，我已经实现了一个幻灯片，延伸到整个页面，一个固定的标题

问题1：无法将选项卡放置在行的底部。如图所示，当前位置以颜色显示，黑色方框是我想要选项卡的位置

导致此问题的代码：

  <style type="text/css">
    .trow {
        align-content: stretch;
        opacity: 1;
        background-color: white;
        overflow: auto;
        top: 0px;
        font-size: larger;
    }
    body {
        align-content: center;
        align-items: center;
        align-self: center;
        background-image: url('Images_bg/Sea_02_highres.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
        transition: opacity 0.3s linear, transform 0.9s ease-in-out, box-shadow 0.9s ease-in-out;
    }

        body::after {
            content: "";
            background: url('Images_bg/Sea_02_highres.jpg');
            opacity: 0.3;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }
    #wrap {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        background-color: black;
    }

        #wrap img.bgfade {
            position: absolute;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(window).load(function () {
            $('img.bgfade').hide();
            var dg_H = $(window).height();
            var dg_W = $(window).width();
            $('#wrap').css({ 'height': dg_H, 'width': dg_W });
            function anim() {
                $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
                $("#wrap img").first().fadeIn(2000);
                setTimeout(anim, 4000);
            }
            anim();
        })
        $(window).resize(function () { window.location.href = window.location.href })
    });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server"></ajaxToolkit:ToolkitScriptManager>
    </div>
    <div id="wrap">
        <img class="bgfade" src="Images_bg/nfspain_sea_p.jpg" />
        <img class="bgfade" src="Images_bg/8.jpg" />
        <img class="bgfade" src="Images_bg/Sea_02_highres.jpg" />
        <img class="bgfade" src="Images_bg/351539-admin.jpg" />
        <img class="bgfade" src="Images_bg/cargo-ship.jpg" />
        <img class="bgfade" src="Images_bg/cargo_ship_pollution_wallpaper-other.jpg" />
        <img class="bgfade" src="Images_bg/cargo_ship_wallpaper_3-wide.jpg" />
        <img class="bgfade" src="Images_bg/maersk_line_cargo_ship_1920x1200_22372.jpg" />
    </div>
    <div>
        <asp:Table ID="table1" runat="server" Width="100%" Height="100%" CellPadding="5" CellSpacing="5" HorizontalAlign="Center">
            <asp:TableHeaderRow Width="100%" BackColor="White">
                <asp:TableHeaderCell ColumnSpan="2" BackColor="White" Width="90%" HorizontalAlign="Center" VerticalAlign="Middle">
                    <asp:Image ID="img_banner" runat="server" Width="90%" ImageAlign="Middle" ImageUrl="~/Images/logistics-and-stores-banner.png" />
                </asp:TableHeaderCell>
            </asp:TableHeaderRow>
            <asp:TableRow Width="100%" VerticalAlign="Bottom">
                <asp:TableCell Width="50%" HorizontalAlign="Right" VerticalAlign="Bottom">
                    <asp:LinkButton ID="lb_logistics" runat="server" BackColor="#E74C3C" Width="200px" Height="150px" Text="Logistics" Font-Bold="true" Font-Underline="false" Font-Size="XX-Large" Font-Names="Calibri" ForeColor="White" OnClick="lb_logistics_Click"></asp:LinkButton>
                </asp:TableCell>
                <asp:TableCell Width="50%" HorizontalAlign="Left" VerticalAlign="Bottom">
                    <asp:LinkButton ID="lb_stores" runat="server" BackColor="#9DC02E" Text="Stores" Width="200px" Height="150px" Font-Bold="true" Font-Underline="false" Font-Size="XX-Large" Font-Names="Calibri" ForeColor="White"></asp:LinkButton>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </div>
</form>


特罗先生{
对齐内容：拉伸；
不透明度：1；
背景色：白色；
溢出：自动；
顶部：0px；
字体大小：较大；
}
身体{
对齐内容：居中对齐；
对齐项目：居中；
自对准：居中；
背景图片：url（'Images_bg/Sea_02_highres.jpg'）；
背景尺寸：封面；
背景重复：无重复；
身高：100%；
宽度：100%；
过渡：不透明度0.3s线性，变换0.9s缓进缓出，长方体阴影0.9s缓进缓出；
}
正文：：之后{
内容：“；
背景：url（'Images_bg/Sea_02_highres.jpg'）；
不透明度：0.3；
排名：0；
左：0；
底部：0；
右：0；
位置：绝对位置；
z指数：-1；
}
#包裹{
位置：固定；
z指数：-1；
排名：0；
左：0；
背景色：黑色；
}
#包裹img.bgfead{
位置：绝对位置；
排名：0；
显示：无；
宽度：100%；
身高：100%；
z指数：-1；
}
$（文档）.ready（函数（）{
$（窗口）。加载（函数（）{
$（'img.bgfead'）.hide（）；
var dg_H=$（窗口）.height（）；
var dg_W=$（窗口）.width（）；
$（'wrap'）.css（{'height'：dg#H，'width'：dg#W}）；
函数anim（）{
$（“#wrap img.bgfead”）.first（）.appendTo（“#wrap”）.fadeOut（1500）；
$（“#wrap img”）.first（）.fadeIn（2000）；
设置超时（动画，4000）；
}
动漫（）；
})
$（window）.resize（函数（）{window.location.href=window.location.href}）
});

问题2:单击“物流”后，我被重定向到具有固定标题的页面，这导致下一行的手风琴被阴影遮挡。这张图片更好地说明了这一点：

产生这种效果的代码是：

  <style type="text/css">
    body {
        align-content: center;
        align-items: center;
        align-self: center;
        background-image: url('Images_bg/Sea_02_highres.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        height: 90%;
        width: 90%;
        transition: opacity 0.3s linear, transform 0.9s ease-in-out, box-shadow 0.9s ease-in-out;
    }

        body::after {
            content: "";
            background: url('Images_bg/Sea_02_highres.jpg');
            opacity: 0.3;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }

    div.transbox {
        align-content: center;
        align-items: center;
        align-self: center;
        margin: 22px;
        background-color: #ffffff;
        border: 1px solid grey;
        opacity: 0.9;
        filter: alpha(opacity=50); /* For IE8 and earlier */
    }

    div.tansparentbox {
        align-content: center;
        align-items: center;
        align-self: center;
        margin: 22px;
        background-color: gray;
        border: 1px solid grey;
        opacity: 0.6;
        font-weight: bold;
        border: thin;
        border-color: black;
        filter: alpha(opacity=50); /* For IE8 and earlier */
    }

    .trow {
        position: fixed;
        align-content: stretch;
        opacity: 1;
        background-color: white;
        overflow: auto;
        top: 0px;
        font-size: larger;
    }

    .trow2:hover {
        font-size: xx-large;
        background-color: azure;
        text-decoration: chocolate underline solid;
        text-decoration-style: solid;
        animation: ease-in 4s ease 4 infinite;
    }

    .cellstyle {
        padding-top: 20px;
    }

    .tblbg {
        background-color: #d7d7d7;
    }
    /*Accordion menu(side) design css*/
    .accordionHeader {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #2E4d7B;
        font-family: Calibri;
        font-size: 20px;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
        opacity: 1;
    }

        .accordionHeader:hover {
            background-color: #4676ba;
        }

    #master_content .accordionHeader a {
        color: #FFFFFF;
        background: none;
        text-decoration: none;
        font-weight: bold;
        opacity: 1;
    }

        #master_content .accordionHeader a:hover {
            background: none;
            text-decoration: underline;
            font-weight: bold;
            opacity: 1;
        }

    .accordionHeaderSelected {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #5078B3;
        font-family: Calibri;
        font-size: 20px;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
        opacity: 1;
    }

    #master_content .accordionHeaderSelected a {
        color: #FFFFFF;
        background: none;
        text-decoration: none;
        opacity: 0.9;
        font-weight: bold;
        color: navy;
        opacity: 1;
    }

        #master_content .accordionHeaderSelected a:hover {
            background: none;
            text-decoration: underline;
            font-weight: bold;
            opacity: 1;
            color: navy;
        }

    .accordionContent {
        background-color: #D3DEEF;
        border: 1px dashed #2F4F4F;
        border-top: none;
        padding: 5px;
        padding-top: 10px;
        opacity: 1;
        color: navy;
    }

    #wrap {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        background-color: black;
    }

        #wrap img.bgfade {
            position: absolute;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
</style>


身体{
对齐内容：居中对齐；
对齐项目：居中；
自对准：居中；
背景图片：url（'Images_bg/Sea_02_highres.jpg'）；
背景尺寸：封面；
背景重复：无重复；
身高：90%；
宽度：90%；
过渡：不透明度0.3s线性，变换0.9s缓进缓出，长方体阴影0.9s缓进缓出；
}
正文：：之后{
内容：“；
背景：url（'Images_bg/Sea_02_highres.jpg'）；
不透明度：0.3；
排名：0；
左：0；
底部：0；
右：0；
位置：绝对位置；
z指数：-1；
}
变速箱{
对齐内容：居中对齐；
对齐项目：居中；
自对准：居中；
利润率：22px；
背景色：#ffffff；
边框：1px纯灰；
不透明度：0.9；
过滤器：alpha（不透明度=50）；/*适用于IE8及更早版本*/
}
分箱{
对齐内容：居中对齐；
对齐项目：居中；
自对准：居中；
利润率：22px；
背景颜色：灰色；
边框：1px纯灰；
不透明度：0.6；
字体大小：粗体；
边界：薄；
边框颜色：黑色；
过滤器：alpha（不透明度=50）；/*适用于IE8及更早版本*/
}
特罗先生{
位置：固定；
对齐内容：拉伸；
不透明度：1；
背景色：白色；
溢出：自动；
顶部：0px；
字体大小：较大；
}
.trow2:悬停{
字体大小：xx大号；
背景颜色：天蓝；
文字装饰：巧克力下划线实心；
文字装饰风格：立体；
动画：4sEase4无限轻松；
}
.cellstyle{
填充顶部：20px；
}
.tblbg{
背景色：#d7d7d7；
}
/*手风琴菜单（侧）设计css*/
.手风琴头{
边框：1px实心#2F4F4F；
颜色：白色；
背景色：#2E4d7B；
字体系列：Calibri；
字体大小：20px；
字体大小：粗体；
填充物：5px；
边缘顶部：5px；
光标：指针；
不透明度：1；
}
.accordionHeader:悬停{
背景色：#4676ba；
}
#主内容。手风琴头a{
颜色：#FFFFFF；
背景：无；
文字装饰：无；
字体大小：粗体；
不透明度：1；
}
#master_内容。手风琴头a：悬停{
背景：无；
文字装饰：下划线；
字体大小：粗体；
不透明度：1；
}
.手风琴校长当选{
边框：1px实心#2F4F4F；
颜色：白色；
背景色：#5078B3；