那些遇到过的问题

如何自动为已经结构化的图片库设置动画？

2 html javascript css jquery

根据我在 YouTube 上观察到的教程，我有一个仅在 HTML5/CSS3 中构建的响应式设计，但在视频中它只是打包，我错过了我致力于搜索的重要内容，但我没有找到第二部分或其他视频解释或者是参考 同时复习频道上的每个教程但是都没有成功。：/

这是完整的代码，适用于任何移动设备和计算机。

img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* ---------------------------------- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* ---------------------------------- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active]~.ui-article {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article[data-active]:before {
  opacity: 0;
}


/* ---------------------------------- */

.ui-thumbnail>img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.ui-thumbnail:active>img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


/* ---------------------------------- */

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #1A130C;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
  -webkit-transition-duration: 0.7s, 0.7s, 0.7s;
  transition-duration: 0.7s, 0.7s, 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="app" data-state="0">
  <div class="ui-big-images">
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">

    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>

    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如何使用 jQuery 以简单的方式为画廊设置动画，如下图所示：

图像描述简介

你能向我解释一下如何为这个已经结构化的画廊制作动画吗？

Dan*_*dez 5

有很多方法可以通过使用纯 JavaScript 或 jQuery 来实现该结果。

回顾HTML标记，该data-key属性是一个指示当前图像将被显示在画廊，指示与类中的元素之间的关系ui-big-image，ui-thumbnail或ui-article。

对于带有 class 的元素，ui-big-image它们有一个 CSS 声明，使用以下规则使它们隐藏：

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明 这些元素通过 CSS 语句可见：

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
Run Code Online (Sandbox Code Playgroud)

对于带有 class 的元素，ui-article它们有一个 CSS 声明，使用以下规则使它们隐藏：

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
Run Code Online (Sandbox Code Playgroud)

然后，通过.ui-article[data-active]CSS 规则反转样式，使它们视情况可见或不可见。

.ui-article[data-active] {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
Run Code Online (Sandbox Code Playgroud)

CSS 声明ui-article:before添加了一个空白部分来隐藏图像描述。使用.ui-article[data-active]:beforeCSS 规则，我们使其可视化。

在此处输入图片说明

然后，您必须将事件分配给缩略图和上一个和下一个按钮，以交换上述类的元素中的data-active属性，使它们可见或不可见。对于缩略图，我有这个功能：

function setThumbnailAction() {
  var uiThumbnailElements = document.getElementsByClassName("ui-thumbnail");
  var i, len = uiThumbnailElements.length, thumbnail;

  itemsInGallery = len - 1;

  for (i = 0; i < len; i++) {
    thumbnail = uiThumbnailElements[i];
    thumbnail.onclick = function() {
      key = this.dataset.key;
      showImage();
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

在前面的代码中，我们key使用 class获取元素的ui-thumbnail，并将其保存在一个全局key变量中。然后我们调用showImage()函数。

该showImage()函数负责data-active将具有默认true值的属性设置为具有 CSS 类的元素ui-big-image，ui-article并通过此选择器ui-thumbnail使用该key值div.ui-big-image[data-key=\"" + key + "\"]。一开始我们总是用函数删除data-active属性restoreGallery()。

function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");
    var image = document.querySelector("div.ui-big-image[data-key=\"" + key + "\"]");
    image.dataset.active = "true";

    var article = document.querySelector("article.ui-article[data-key=\"" + key + "\"]");
    article.dataset.active = "true";

    var uiThumbnail = document.querySelector("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.dataset.active = "true";
}
Run Code Online (Sandbox Code Playgroud)

您可以在这些示例中看到实际操作：

使用纯 JavaScript：

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
Run Code Online (Sandbox Code Playgroud) 
.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
Run Code Online (Sandbox Code Playgroud) 
.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
Run Code Online (Sandbox Code Playgroud)

使用 jQuery：

.ui-article[data-active] {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
Run Code Online (Sandbox Code Playgroud) 
img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* --- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* --- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35

归档时间：

查看次数：

151 次

最近记录：

5 年，9 月 前
相关归档
同步调用异步Javascript函数 198
Underscore.js - 将键/值对的数组映射到对象 - 一个班轮 46
如何在JavaScript中同步播放音频文件？ 44
在IE8中应用css渐变滤镜时,表格单元格会丢失边框 31
使用<div style ="display:none">隐藏表格数据 29
根据单元格值DataTable更改行背景颜色 27
具有PNG后备的浏览器中的图像的SVG 26
在HTML5中验证.:提交后无效的classe 20
在div中安装iframe 20
为什么在将0作为唯一参数传递给calc()函数时,我必须指定一个单位标识符(例如'px')？ 19
难疑归档
使用CSS更改HTML5输入的占位符颜色 3876
我应该在MySQL中使用日期时间或时间戳数据类型吗？ 2598
使用__init __()方法理解Python super() 2366
如何用Vim中的换行符替换字符？ 1870
如何仅列出两次提交之间更改的文件名？ 1807
如何确定Python变量的类型？ 1437
为什么文本文件以换行符结尾？ 1375
Markdown中的评论 1277
获取数据库中所有表的大小 1180
如何在JavaScript中创建二维数组？ 1081
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号