0

我一直在浏览 w3schools 关于使用 Javascript 使用媒体查询的教程，但我无法让我的叠加层在移动浏览器上滑动整个页面。

在桌面浏览器中，单击变换图标时，叠加层会向左滑动 50%。

使用此示例使用 Javascript 的媒体查询

这是我想添加的新功能。

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("myNav").style.left = "100%";
  } else {
    document.getElementById("myNav").style.left = "50%";
  }
}


var x = window.matchMedia("(max-width: 400px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

当我将上述函数添加到片段中列出的现有函数时，叠加层已经可见，并且当视口小于或等于 400px 时不会滑动整个方式。

我还希望在单击叠加层时隐藏滑块中的箭头。箭头的类名是

.flickity-prev-next-button

这是没有新功能供您参考的外观片段。 

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";
  } else {
    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}
.flickity-page-dots {
  display: none;
}

.main-carousel {
  margin-top: 20px;
  padding: 0;
}

.carousel-cell img {
  max-width: 35%;
  /* full width */
  height: auto;
}

.carousel-cell {
  width: 100%;
  /* full width */
  background: #FFFFFF;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}
<head>
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
<meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="myNav" class="overlay"></div>
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>

  <div class="main-carousel" data-flickity='{ "cellAlign": "left","contain": true,"wrapAround":true }'>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
  </div>
</body>

这是添加新功能后的外观片段。我已<meta name="viewport" content="width=device-width">根据您的建议将该行添加到 head 标签，但结果是相同的 - 叠加仅滑动 50% 的页面。

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";
  } else {
    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("myNav").style.left = "100%";
  } else {
    document.getElementById("myNav").style.left = "50%";
  }
}


var x = window.matchMedia("(max-width: 400px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
.flickity-page-dots {
  display: none;
}

.main-carousel {
  margin-top: 20px;
  padding: 0;
}

.carousel-cell img {
  max-width: 35%;
  /* full width */
  height: auto;
}

.carousel-cell {
  width: 100%;
  /* full width */
  background: #FFFFFF;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}
<head>
  <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
  <link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div id="myNav" class="overlay"></div>
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>

  <div class="main-carousel" data-flickity='{ "cellAlign": "left","contain": true,"wrapAround":true }'>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
  </div>
</body>

4

0 回答 0