Javascript启动画面+媒体查询

2024-05-20 • 问答

我正在将js用于带有视频背景的启动画面。如果有人单击它，它就会淡入主页。对于移动屏幕，我想添加显示的图像而不是视频。我最初的尝试是显示图像，但是单击后它不会消失。这是我尝试之前的代码：

<style>
 #splashscreen {  
    background-color: #000000;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
}


 .logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index:100000;
  height: auto;
  max-width: 55%;
  /* bring your own prefixes */
  transform: translate(-50%,-50%);

}

  @media only screen and (max-width: 600px) {
  .logo {
    max-width:90%;
  }

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 10000;
}
</style>


<div id="splashscreen">

  <a href="#" class="enter_link">
    <img class="logo" src="XXXXXXXXXX">
    <video playsinline=""  autoplay="" muted="" loop="" poster="XXXXXXXXXXX" id="bgvid">
  <source src="XXXXXXXXXXX" type="video/mp4">
</source></video></a>

</div>

<script type="text/javascript">//<![CDATA[

    $(window).load(function(){

$('.enter_link').click(function () {
    $(this).parent('#splashscreen').fadeOut(500);
});

    });

  //]]>
</script>

谢谢您的帮助。

我创建了一个小提琴来解决您的问题。

$(document).ready(function() {
  $(".enter_link").click(function(e) {
    e.stopPropagation();
    $(this)
      .parent("#splashscreen")
      .fadeOut(500);
  });
});

  #splashscreen {
  background-color: #000000;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
}

.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100000;
  height: auto;
  max-width: 55%;
  /* bring your own prefixes */
  transform: translate(-50%,-50%);
}

@media only screen and (max-width: 600px) {
  .logo {
    max-width: 90%;
  }
  video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.9;
    z-index: 10000;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="splashscreen">

  <a href="#" class="enter_link">
    <img class="logo" src="XXXXXXXXXX">
    <video playsinline="" autoplay="" muted="" loop="" poster="XXXXXXXXXXX" id="bgvid">
      <source src="XXXXXXXXXXX" type="video/mp4">
      </source>
    </video>
  </a>
</div>

我所做的更改是

$(document).ready(function() {
  $(".enter_link").click(function(e) {
    e.stopPropagation();
    $(this)
      .parent("#splashscreen")
      .fadeOut(500);
  });
});

尽管您的锚标记不能覆盖整个页面，但是您可以直接在click上拥有#splashscreen事件，并在方法中执行以下操作，

$(this).fadeOut(500);

更新

要跟踪首次访问该网站，可以使用localStorage-可以设置一个名为firstVisit的标记

let firstVisit = !localStorage.getItem('firstVisitCompleted')
if (firstVisit) {
  showSplashScreen()
  localStorage.setItem('firstVisitCompleted',true)
} else {
  hideSplashScreen()
}

签出这个小提琴https://jsfiddle.net/0egocjLa/

基本上，您的锚标签缺少高度。提供高度并单击功能将起作用。

$(document).ready(function() {
  $(".enter_link").click(function(e) {
    e.stopPropagation();
    $(this)
      .parent("#splashscreen")
      .fadeOut(500);
  });
});

#splashscreen {
  background-color: #000000;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
}

.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100000;
  height: auto;
  max-width: 55%;
  /* bring your own prefixes */
  transform: translate(-50%,-50%);
}

@media only screen and (max-width: 600px) {
  .logo {
    max-width: 90%;
  }
  video {
    display: none;
  }
  a{
    display:block;
    height:100vh;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="splashscreen">

  <a href="#" class="enter_link">
    <img class="logo" src="https://www.stackoverflowbusiness.com/hubfs/logo-so-white.png">
    <video playsinline="" autoplay="" muted="" loop="" poster="https://cdn.shopify.com/s/files/1/2999/0620/files/black-bg.png" id="bgvid">
      <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
      </source>
    </video>
  </a>
</div>

Javascript启动画面+媒体查询

coalawang 回答：Javascript启动画面+媒体查询

大家都在问