个人中心
gpt4 book ai didi

html - 如何阻止我的幻灯片影响页面上的其他元素

转载 作者：行者123 更新时间：2023-11-28 07:25:54 25 4
gpt4 key购买 nike

我的幻灯片 div 在 HTML 中位于我的标题导航上方以创建全屏幻灯片，但我页面上的所有元素都随着我的幻灯片而淡出，我该如何防止这种情况发生？

谢谢

我是新手，所以我不确定布局是否正确。在这里输入代码

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
"use strict";       
   var scroll_start = 0;
   var startchange = $('#about');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('#header').css('background-color', '#3A3939');
       } else {
          $('#header').css('background-color', 'transparent');
       }
   });
});

var currentBackground = 0;

var backgrounds = [];

backgrounds[0] = 'images/pic3.png';

backgrounds[1] = 'images/pic2.png';

backgrounds[2] = 'images/pic1.png';

backgrounds[3] = 'images/pic4.png';

function changeBackground() {

    currentBackground++;

    if(currentBackground > 3) currentBackground = 0;

    $('.slideshow').fadeOut(900,function() {
        $('.slideshow').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('.slideshow').fadeIn(1000);
    });


    setTimeout(changeBackground, 3500);
}

$(document).ready(function() {

    setTimeout(changeBackground, 3500);  

}); 
</script>
</head>

<body>
<div id="home">
<div class="slideshow">
<div id="header">
 <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div id="styledimg"></div>
</nav>
</div>
<div id="head-soc">
<div id="linkedin-icon"><a href="http://linkedin.com/pub/titus-jackson/2/a2b/939">Linkedin</a></div>
<div id="youtube-icon"><a href="http://youtube.com/titusishmael">Youtube</a></div>
<div id="facebook-icon"><a href="http://facebook.com/titusjackson1">Facebook</a></div>
</div> 
<div class="content">
<p>Create, Collaborate, Innovate</p>
</div>
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators tulsa has to offer. We love working on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.</p>
<p>Our paramount value is to approach the material with excellence, and an original point of view to tell a unique and compelling story. It is our belief that life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.</p>
<p>We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created multiple award winning music vidoes, short films and even a feature film. Feel free to take a look around the site, and drop us an email, we look forward to hearing from you.</p> 
<a href="mailto:titusjackson@mac.com"><img src="images/email1.png" alt="email" width="26" height="26" /></a>
</div> 
</div>
<div id="projects">
<h5>View our current projects:</h5>

 <div class="wrapper1">
 <iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
 <p>Eugene Gregory Promo</p>
 </div>
 <div id="wrapper2">
 <iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
 <p>Family Cup Promo</p>
 </div>
 <div class="wrapper3">
 <iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
 <p>This Generation</p>
 </div>
 </div>
<div id="contact">
 <section3>
<h3>To connect with Us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson@mac.com">
<p>titusjackson@mac.com</p>
</a><img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>

</body>
</html>


@charset "UTF-8";
/* CSS Document */
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}


#header {
    width: 100%;
    margin-top: -15px;
    position: fixed;
    background-color: transparent;
    transition-duration: 1s;
}

div#header nav {
    width: 1425;
    height: 110px;
}

div#header ul {
    list-style: none;
    margin-left: 100px;
    float: left;
}

div#header li {
    float: left;
    margin-left: 64px;
    margin-top: 10px;
}

div#header a {
     color: white;
     text-decoration: none;
     line-height: 45px;
     font-size: .9em;
     text-transform: capitalize;
}

div#header a:hover {
    color: rgba(249,0,3,1.00);
}

div#styledimg {
    background-image: url(images/logo.png);
    background-repeat: no-repeat; width: 224px;
    height: 85px;
    float: right;
    margin-right: 150px;
    margin-top: 10px;
    z-index: 1003;
}


/*page-specific header styles*/

#header {
    background-color: rgba(60,59,59,1.00);
    width: 1425;
    height: 110px;
}

/* layout styles*/

/*home page*/

.slideshow {
    background-image:url(images/pic3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 500px 0px 0px;
    background-attachment: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 900px;
    line-height: 0px;
    margin-top: -330px;
    padding-top: -15px;
}

#header {
    background-color: transparent;
}

#head-soc {
    width: 129;
    height: 86;
    margin: 10px;
    padding: 0px;
    float: right;
    margin-right: 40px;
    margin-top: 255px;
    right: 25px;
    position: fixed;
    z-index: 2;
}

#head-soc a {
    margin-top: 10px;
    margin-right: 20px;
}

 #linkedin-icon a {
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 43px;
    width: 43px;
    border: 0;
    background-image: url(images/socialsprites_white.png); 
    display: block;
    float: right;   
    background-position: 0px 0px;
}
#linkedin-icon a:hover {
    background-image: url(images/socialsprites_white.png); 
    background-position: 0px -43px;
}

#youtube-icon a {
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 43px;
    width: 43px;
    border: 0;
    background-image: url(images/socialsprites_white.png); 
    display: block;
    float: right;
    margin-left: 20px;
    background-position: -43px 0px;
}

 #youtube-icon a:hover {
    background-image: url(images/socialsprites_white.png); 
    background-position: -43px -43px;
}

 #facebook-icon a {
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 43px;
    width: 43px;
    border: 0;
    background-image: url(images/socialsprites_white.png);
    display: block;
    float: right;
    background-position: -86px -85px;
}

 #facebook-icon a:hover {
    background-image: url(images/socialsprites_white.png);
    background-position: -86px -128px;
}

.content p {
    font-family: BlairMdITC TT-Medium;
    font-size: 44px;
    line-height: 120%;
    width: 550px;
    text-align: center;
    padding-top: 360px;
    margin-top: 330px;
    margin-left: 575px;
    color: rgba(248,241,241,1.00);
}

/* about page*/

div#about {
     background-color:rgba(188,184,184,1.00);
     height: 550px;
     margin-top: -35px;
     padding-top: 100px;
 }

.wrapper h4 {
    font-famiy: Geneva;
    font-size: 25px;
    padding-left: 224px;
    color: rgba(249,0,3,1.00);
    margin-bottom: -20px;
}

.wrapper p {
    font-family: Geneva;
    font-size: 12px;
    margin-left: 226px;
    margin-top: 20px;
    margin-bottom: 15px;
    color: rgba(134,133,133,1.00);
}

h6 {
    padding-left: 225px;
    margin-top: -20px;
    margin-bottom: 10px;
    color: rgba(60,59,59,1.00);
}
img {
     float: left;
     margin-left: 225px;
     margin-right: 15px;
 }

#section2 {
     font-family: Helvetica;
     font-size: 16px;
     color: rgba(60,59,59,1.00);
     width: 1280px;
     padding-top: -80px;
     height: 300px;
 }

 #section2 p {
     color: rgba(60,59,59,1.00);
 }

#section2 img {
    margin-left: 2px;   
}

span {
     color: rgba(249,0,3,1.00);
 }


 /* projects page */

 div#projects {
     background-color: #3A3939;
     background-position: 25px;
     height: 450px;
     margin: 0px; 
     line-height: 0;
     padding-top: 25px; 
 }

 .wrapper1 {
     float: left;
     width: 265;
     height: 200px;
     margin-left: 200px;
     padding-top: 50px;
 }

 #wrapper2 {
     float: right;
     width: 265;
     height: 200px;
     margin-right: 200px;
     padding-top: 50px;
 }

 .wrapper3 {
     float: left;
     margin-left: 175px;
     padding-top: 50px;
     width: 265;
     height: 200px;
 } 

 .wrapper1 p {
    margin-left: 42px;
    font-family: BlairMdITC TT-Medium;
    font-size: 20px;
    color: rgba(249,0,3,1.00);
    margin-top: 20px;
 }

 #wrapper2 p {
     margin-left: 65px;
     font-family: BlairMdITC TT-Medium;
     font-size: 20px;
     color: rgba(249,0,3,1.00);
     margin-top: 20px;
 }

 .wrapper3 p {
     margin-left: 70px;
     font-family: BlairMdITC TT-Medium;
     font-size: 20px;
     color: rgba(249,0,3,1.00);
     margin-top: 20px;
 }

  div#projects h5 {
    margin-left: 650px;
    font-size: 20px;
    font-family: Helvetica, Arial, sans-serif;
    color:rgba(179,178,178,1.00);
    padding-bottom: 45px;


    margin-bottom: -15px;

 }

 p {
    font-size: 16px;
    margin-left: 195px;
    color: rgba(249,247,247,1.00);
 }

 /* contact page */

 div#contact {
     background-image:url(images/studio4.png);
     background-size: cover;
     background-attachment: fixed;
     padding-top: 35px;
     padding-bottom: 100px; 
 }

 section3 h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: rgba(249,0,3,1.00);
    margin-left: 660px;
    margin-top: 75px;
 }

 section3 p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,1.00);
    width: 650px;
    padding-left: 85px;
    margin-left: 385px;
 }

 .section4 {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,1.00);
    margin-left: 440px;
    margin-top: 50px;
 }

 .section4 a {
     text-decoration: none;
 }

 .section4 a p:hover {
     color: rgba(249,0,3,1.00);
}




/* ~~ The footer ~~ */




/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
    display: block;
}

最佳答案

您已将所有 HTML 放在带有幻灯片类的 div 中:

<div class="slideshow"> //this is left open
//other divs are closed later on like this one:
<div id="styledimg"></div>
//but all the divs below slideshow are inside of the slideshow div

因此，无论您对幻灯片 div 做什么动画，都会影响它的所有子项。

关于html - 如何阻止我的幻灯片影响页面上的其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31819943/

25 4 0
文章推荐： javascript - div 在鼠标移动时淡入，不淡出
文章推荐： swift - 无法在 Xcode 预览上构建事件方案
文章推荐： javascript - 如何在 javascript 中调整 html5 Canvas 的大小和位置
文章推荐： javascript - IE9双下拉问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com