Майя提出的问题

Евгения

Asked: 2024-12-03 16:26:57 +0800 CST

如何使用 css mask 制作这样的形状？

9

告诉我，是否可以使用 CSS 制作这样的遮罩，以便将来您可以插入任何照片？

Евгения

Asked: 2024-10-18 21:29:52 +0800 CST

告诉我这样的卡是怎么卖的？

4

从布局和BEC执行来看，这样的卡片是如何制作的？与飞机上的类似，这些显然不是滑块。它们的实现方式变得很有趣，当你将鼠标悬停在图片上时，图片会发生变化，但在移动版本中它只是滚动

如果你能告诉我一个视频或文章，我将不胜感激，我找不到类似的东西

Евгения

Asked: 2024-09-30 17:33:07 +0800 CST

如何使用js css html实现两个块的无尽垂直动画

8

现在有了这个结果，如何让这一切不断发生呢？我们需要图片朝不同的方向移动。

const imagesOne = [
    'assets/img/main-1.jpg',
    'assets/img/main-2.jpg',
    'assets/img/main-3.jpg'
];

const imagesTwo = [
    'assets/img/main-4.jpg',
    'assets/img/main-5.jpg',
    'assets/img/main-6.jpg'
];

const boxOne = document.querySelector('.ag_main-right_one');
const boxTwo = document.querySelector('.ag_main-right_two');

imagesOne.forEach(src => {
    const img = document.createElement('img');
    img.className = 'ag_main-right_img';
    img.src = src;
    img.alt = 'main';
    boxOne.appendChild(img);
});

imagesTwo.forEach(src => {
    const img = document.createElement('img');
    img.className = 'ag_main-right_img';
    img.src = src;
    img.alt = 'main';
    boxTwo.appendChild(img);
});

.ag_main-right {
    height: 700px;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 574px;
}

.ag_main-right_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 25px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
 /* Добавляем плавность перехода */
}

.ag_main-right_img {
    max-width: 277px;
    width: 100%;
    border-radius: 30px;
    -o-object-fit: cover;
    object-fit: cover;
}

.ag_main-right_one {
    left: 0;
    -webkit-animation: scrollDown 10s linear infinite;
    animation: scrollDown 10s linear infinite;
    top: 0;
}

.ag_main-right_two {
    right: 0;
    top: 0;
    -webkit-animation: scrollUp 10s linear infinite;
    animation: scrollUp 10s linear infinite;
}

@-webkit-keyframes scrollDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes scrollUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

                    <div class="ag_main-right">
                        <div class="ag_main-right_box ag_main-right_one">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                        </div>
                        <div class="ag_main-right_box ag_main-right_two">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                        <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                    <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                                                <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                                                                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                                                                                                        <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                        </div>
                    </div>

Евгения

Asked: 2024-08-23 21:37:56 +0800 CST

swiper如何解决分页01、02、03-010等的问题

5

如何使分页正常显示应该是01 02 03 04 05 06 07 08 09 10等t,e 20 30 40

var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
        return '<span class="' + className + '">' + "0" + (index + 1) + "</span>";
    },
  },
    });

.swiper {
      width: 100%;
      height: 500px
    }
    .swiper-wrapper{
    padding-bottom: 50px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: red;
      height: 200px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.swiper-pagination-bullet {
    color: #18918a;
}
.swiper-pagination-bullet-active {
    color: #222;
}

.swiper-pagination-bullet-active::after {
    opacity: 1;
}
.swiper-pagination-bullet-active {
    padding-right: 82px;
    background-color: transparent;
    position: relative;
}
.swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 33px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 54px;
    border-bottom: 1px solid #fff;
    opacity: 0;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}
.swiper-pagination-bullet {
    font-size: 14px;
    line-height: 100%;
    font-family: "Onest-Regular";
    background-color: transparent !important;
    opacity: 1;
    height: 14px;
    position: relative;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
    width: 10px;
    z-index: 10;
}
.common-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide">Slide 11</div>
    </div>
    <div class="swiper-pagination common-pagination"></div>
  </div>

Майя

Asked: 2024-08-21 23:12:09 +0800 CST

如何获取最后一个可见的滑动幻灯片

5

您需要删除可见幻灯片中最后一个元素的右边框，如何执行此操作？

document.querySelectorAll('.swiper-common').forEach(el => {
    let swiper = new Swiper(el, {
    slidesPerView: 4,
    loop: true,
    pagination: {
      el: el.querySelector('.common-pagination'),
      clickable: true,
      renderBullet: function (index, className) {
          return '<span class="' + className + '">' + "0" + (index + 1) + "</span>";
      },
    },
     navigation: {
        nextEl: el.querySelector('.common-next'),
        prevEl: el.querySelector('.common-prev')
     }
});
});

.swiper {
    overflow-x: clip !important;
    overflow: visible;
    position: relative;
}

.common-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 0 !important;
}

.common-pagination .swiper-pagination-bullet {
    font-size: 14px;
    line-height: 100%;
    font-family: "Onest-Regular";
    background-color: transparent;
    opacity: 1;
    height: 14px;
    position: relative;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}

.common-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 33px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 54px;
    border-bottom: 1px solid #fff;
    opacity: 0;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}

.common-pagination .swiper-pagination-bullet-active {
    padding-right: 82px;
    background-color: transparent;
    position: relative;
}

.common-pagination .swiper-pagination-bullet-active::after {
    opacity: 1;
}

.common-pagination .swiper-pagination-bullet-active:last-child {
    padding-right: 0;
    padding-left: 82px;
}

.common-pagination .swiper-pagination-bullet:last-child::after {
    left: auto;
    right: 19px;
}

.pre-trial_pagination .swiper-pagination-bullet {
    color: #18918a;
}

.pre-trial_pagination .swiper-pagination-bullet-active {
    color: #fff;
}

.arrows__container {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    right: 0;
}

.common-prev,
.common-next {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    min-height: 50px;
    min-width: 50px;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
    z-index: 10;
    cursor: pointer;
}

.common-arrow {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    min-width: 24px;
    min-height: 24px;
}

.light {
    background: #18918a;
}

.pre-trial .pre-trial_pagination {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -50px !important;
}

.pre-trial .arrows__container {
    top: -115px;
}

@media (hover: hover) {
    .common-prev:hover,
  .common-next:hover {
        background: #00786a;
    }
}
.pre-trial {
    background: #173b43;
    padding-top: 80px;
}

.pre-trial__top-titel {
    padding-top: 8px;
    display: block;
}

.pre-trial__top-text {
    padding-top: 24px;
    max-width: 485px;
}

.pre-trial__bottom {
    padding-bottom: 86px;
}

.pre-trial__swiper {
    margin-top: 64px;
    border-top: 1px solid #18918a;
    border-bottom: 1px solid #18918a;
}

.pre-trial__slide {
    padding: 36px 16px 24px 24px;
    border-right: 1px solid #18918a;
    -webkit-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    min-height: 420px;
}

.pre-trial__slide-top {
    gap: 8px;
}

.pre-trial__slide-two {
    max-width: 292px;
    padding: 24px 0 44px;
}

.pre-trial__slide-flex {
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #18918a;
    width: 100%;
}

.pre-trial__slide-flex_two {
    padding-top: 12px;
}

.pre-trial__slide-conainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    padding-top: 24px;
}

.pre-trial__slide-conainer_column {
    gap: 12px;
}

.pre-trial__slide-conainer_column-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 284px;
}

.pre-trial__slide-conainer_btn {
    min-width: 32px;
    width: 32px;
    height: 32px;
}

.pre-trial__slide-conainer_column,
.pre-trial__slide-top,
.pre-trial__slide-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (hover: hover) {
    .pre-trial__slide:hover {
        background: #18918a;
    }
}

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
    <section class="pre-trial">
        <div class="container">
            <div class="pre-trial__top">
                <p class="text-or-24-16 color-white">
                    Адвокаты бюро «Деловой фарватер» решают
                </p>
                <h2 class="pre-trial__top-titel text-om-white-42-36-26">
                    90% дел в досудебном порядке
                </h2>
                <p class="pre-trial__top-text text-or-16 color-white">
                    Из них 98% заканчиваются минимальными последствиями или отказом в возбуждении уголовного дела.
                </p>
            </div>
            <div class="pre-trial__bottom">
                <div class="swiper pre-trial__swiper swiper-common">
                    <div class="swiper-wrapper pre-trial__wrapper">
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        на 96 000 000 р.
                                    </p>
                                </div>
                                <p class="pre-trial__slide-two text-or-16-14 color-white">
                                    А также устранен риск привлечения к уголовной ответственности
                                </p>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство пластиковых изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        на 206 000 000 р.
                                    </p>
                                </div>
                                <p class="pre-trial__slide-two text-or-16-14 color-white">
                                    Клиенты не помещены в СИЗО, находятся на свободе
                                </p>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Промышленность
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    315 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    109 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        101 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа кондитерских изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        106 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа строительных материалов
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    118 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    12 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        101 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа кондитерских изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="pre-trial_pagination common-pagination"></div>
                    
                    <div class="arrows__container">
                        <div class="pre-trial-prev common-prev light">
                            <img class="common-arrow" src="assets/img/arrow-left.png" alt="arrow">
                        </div>
                        <div class="pre-trial-next common-next light">
                            <img class="common-arrow" src="assets/img/arrow-right.png" alt="arrow">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Майя

Asked: 2024-08-04 21:37:37 +0800 CST

如何打开手风琴的第一个元素？

5

我无法打开手风琴的第一个元素，以便稍后在单击时将其关闭等。

const accordions = document.querySelectorAll(".accordion");

if(accordions) {
    const openAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.add("open");
        content.style.maxHeight = content.scrollHeight + "px";
    };
    
    const closeAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.remove("open");
        content.style.maxHeight = null;
    };
    
    accordions.forEach((accordion) => {
        const intro = accordion.querySelector(".accordion__control");
        const content = accordion.querySelector(".accordion__content");
    
        intro.onclick = () => {
            if (content.style.maxHeight) {
                closeAccordion(accordion);
            } else {
                accordions.forEach((accordion) => closeAccordion(accordion));
                openAccordion(accordion);
            }
        };
    });
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    -webkit-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    
}

                <ul class="">
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                </ul>

Майя

Asked: 2024-08-04 19:50:50 +0800 CST

如何在单击另一个文本时隐藏元素外部的文本？

5

如何在单击另一个文本时隐藏元素外部的文本？

const box = document.querySelector('.team__box');
const boxInner = box.querySelectorAll('.team__box-slide');

boxInner.forEach((item) => {
  const content = item.querySelector('.team__box-slide_descr-definition');

  const height = content.scrollHeight;

  item.addEventListener('click', () => {
    content.style.height = height + 'px';
  })
})

.team__box-slide_descr-definition {
    height: 0;
    transition: .3s all;
    overflow: hidden;
}

<div class="team__box">
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
</div>

Майя

Asked: 2024-07-30 14:16:20 +0800 CST

有谁知道如何进行这种类型的分页？刷卡器

5

如何减少分页

document.querySelectorAll('.events__swiper').forEach(el => {
    let swiper = new Swiper(el, {

    loop: true,
    pagination: {
      el: el.querySelector('.events-pagination'),
      clickable: true
    },
     navigation: {
        nextEl: el.querySelector('.events-next'),
        prevEl: el.querySelector('.events-prev')
     }

    });
});

.swiper-slide img {
    max-width: 400px;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
                        <div class="swiper events__swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                                                      <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd">
                                </div>
                                <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                                <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                            </div>
                                                            <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                            </div>
                            <div class="events-pagination"></div>
                          
                            <div class="events-prev"></div>
                            <div class="events-next"></div>
                          
                        </div>

Майя

Asked: 2024-07-29 18:17:42 +0800 CST

如何制作这样的图形？关于CSS

7

如何在css中制作这样的三角形？

.header__wrapper-nav_list-inner_wrapper {
    position: relative;
    border-radius: 25px;
    max-width: 156px;
    width: 100%;
    padding: 20px 24px 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    background-color: rgba(10, 40, 107, 0.05);
    list-style: none;
}

.header__wrapper-nav_list-inner_wrapper::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 9px solid #fcf921;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-radius: 25px;
    top: 0;
    right: 19px;
}

                        <ul class="header__wrapper-nav_list-inner_menu">
                            <div class="header__wrapper-nav_list-inner_wrapper">
                                <li class="header__wrapper-nav_list-inner_menu-item">
                                    <a href="#" class="header__wrapper-nav_list-inner_menu-link text-gr-16-14">
                                        Предстоящие
                                    </a>
                                </li>
                                <li class="header__wrapper-nav_list-inner_menu-item">
                                    <a class="header__wrapper-nav_list-inner_menu-link text-gr-16-14" href="#">
                                        Прошедшие
                                    </a>
                                </li>
                            </div>
                        </ul>

Майя

Asked: 2024-07-16 16:50:57 +0800 CST

Yandex 是否有带有过滤器的地图，如何通过单击按钮靠近某个标记？

5

有标签过滤，但是当您单击按钮时它不会缩放到该标签，如何实现？

const categoriesData = {
  category1: [{
      lat: 53.442131071027305,
      lon: 58.99983849999995,
      name: 'Северный переход, 20а1',
      caption: 'Северный переход, 20а',
    },
  ],
  category2: [{
      lat: 53.426321310730245,
      lon: 58.9609671588954,
      name: 'ул. Советская, 20а',
      caption: 'ул. Советская, 20а'
    },
  ],
  category3: [{
      lat: 53.35935432593927,
      lon: 59.007853228836,
      name: 'ул. Коробова, 20',
      caption: 'ул. Коробова, 20'
    },
  ],
};

const init = () => {
  const map = new ymaps.Map('YMapsID-1', {
    center: [53.442131071027305,58.99983849999995],
    zoom: 14,
  });

  let activeCategory = "category1";

  const showCategory = (category) => {
    map.geoObjects.removeAll();

    categoriesData[category].forEach((item) => {
      const placemark = new ymaps.Placemark([item.lat, item.lon], {
        iconColor: '#1d79d3',
        hintContent: item.name,
        balloonContent: item.name,
        iconCaption: item.caption,
      });
      
      map.geoObjects.add(placemark);
    });

    activeCategory = category;
  }

  const categoryButtons = document.querySelectorAll('.category-button');
  categoryButtons.forEach((button) => {
    button.addEventListener('click', (e) => {
      const category = e.currentTarget.dataset.category;
      showCategory(category);
    });
  });

  showCategory(activeCategory);
};

ymaps.ready(init);

<!DOCTYPE html>
<html lang="en">
<head>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>

<!-- Создаём контейнер для карты -->
  <div class="container">
  <div class="container__wrapper">
          <button class=" category-button" data-category="category1">
            <p>Северный переход, 20а</p>
          </button>
          <button class=" category-button" data-category="category2">
            <p>ул. Советская, 20а</p>
          </button>
          <button class=" category-button" data-category="category3">
            <p>ул. Коробова, 20</p>
          </button>
  </div>


  <div id="YMapsID-1" style="width: 500px; height: 400px"></div>
  </div>

Майя

Asked: 2024-07-11 22:32:58 +0800 CST

如何制作多个“显示更多”按钮？

5

我怎样才能编写这段代码，这样我就不必每次都编写新函数来显示更多按钮？

const showMore = document.querySelector('.btn-download');
const btnReviews = document.querySelectorAll('.reviews_btn');
const cards = document.querySelectorAll('.glass__container-card').length;
const cardsReviews = document.querySelectorAll('.reviews__wrapper-photo').length;
let items = 8;

  showMore.addEventListener('click', () => {
    items += 8; // сколько карточек открывается
    const array = Array.from(document.querySelector('.glass__container').children);
    const visItems = array.slice(0 , items);
    visItems.forEach(el => el.classList.add('is-visible'));
      
    if(visItems.length === cards) {
      showMore.style.display = 'none';
    }
  });

  btnReviews.addEventListener('click', () => {
    items += 8; // сколько карточек открывается
    const arrayReviews = Array.from(document.querySelector('.reviews__wrapper').children);
    const visItemsReviews = arrayReviews.slice(0 , items);

    visItemsReviews.forEach(el => el.classList.add('is-visible'));
      
    if(visItemsReviews.length === cardsReviews) {
      btnReviews.style.display = 'none';
    }
  });

.reviews__wrapper-photo:nth-child(n+5) {
    display: none;
}
.reviews__wrapper-photo.is-visible {
    display: block;
}
.glass__container-card:nth-child(n+5) {
    display: none;
}
.glass__container-card.is-visible {
    display: block;
}

 <div class="reviews__wrapper">
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
            </div>
     <div class="reviews_btn">
       <button>
           Показать ещё
      </button>
</div> 

 <div class="glass__wrapper">
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
            </div>
     <div class="btn-download">
       <button>
           Показать ещё
      </button>
</div>

Майя

Asked: 2024-07-11 00:43:24 +0800 CST

如何在不使用new的情况下调用多个滑块？

5

前后滑块有很多，需要确保它们没有被调用通过

new BeforeAfter({
  id: '#one'
}); 
new BeforeAfter({
  id: '#two'
});
new BeforeAfter({
  id: '#two'
});

但总的来说，提前致谢

这是代码

class BeforeAfter {
  constructor(enteryObject) {

      const beforeAfterContainer = document.querySelector(enteryObject.id);
      const before = beforeAfterContainer.querySelector('.bal-before');
      const beforeText = beforeAfterContainer.querySelector('.bal-beforePosition');
      const afterText = beforeAfterContainer.querySelector('.bal-afterPosition');
      const handle = beforeAfterContainer.querySelector('.bal-handle');
      var widthChange = 0;

      beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
      window.onresize = function () {
          beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
      }
      before.setAttribute('style', "width: 50%;");
      handle.setAttribute('style', "left: 50%;");

      //touch screen event listener
      beforeAfterContainer.addEventListener("touchstart", (e) => {

          beforeAfterContainer.addEventListener("touchmove", (e2) => {
              let containerWidth = beforeAfterContainer.offsetWidth;
              let currentPoint = e2.changedTouches[0].clientX;

              let startOfDiv = beforeAfterContainer.offsetLeft;

              let modifiedCurrentPoint = currentPoint - startOfDiv;

              if (modifiedCurrentPoint > 10 && modifiedCurrentPoint < beforeAfterContainer.offsetWidth - 10) {
                  let newWidth = modifiedCurrentPoint * 100 / containerWidth;

                  before.setAttribute('style', "width:" + newWidth + "%;");
                  afterText.setAttribute('style', "z-index: 1;");
                  handle.setAttribute('style', "left:" + newWidth + "%;");
              }
          });
      });

      //mouse move event listener
      beforeAfterContainer.addEventListener('mousemove', (e) => {
          let containerWidth = beforeAfterContainer.offsetWidth;
          widthChange = e.offsetX;
          let newWidth = widthChange * 100 / containerWidth;

          if (e.offsetX > 10 && e.offsetX < beforeAfterContainer.offsetWidth - 10) {
              before.setAttribute('style', "width:" + newWidth + "%;");
              afterText.setAttribute('style', "z-index:" + "1;");
              handle.setAttribute('style', "left:" + newWidth + "%;");
          }
      })

  }
}

new BeforeAfter({
  id: '#one'
});
new BeforeAfter({
  id: '#two'
});
new BeforeAfter({
  id: '#two'
});

.bal-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bal-after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bal-before {
    display: block;
    position: absolute;
    top: 0;
    /* right: 0; */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    overflow: hidden;
}

.bal-before-inset {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.bal-after img,
.bal-before img {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    top: 0;
    bottom: 0;
    left: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.bal-beforePosition {
    background: #121212;
    color: #fff;
    left: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}

.bal-afterPosition {
    background: #121212;
    color: #fff;
    right: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}

.beforeLabel {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.afterLabel {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/* handle and arrow */

.bal-handle {
    height: 41px;
    width: 41px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -21px;
    border: 2px solid #fff;
    border-radius: 1000px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 0 10px rgb(12, 12, 12);
}

.handle-left-arrow,
.handle-right-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
}

.handle-left-arrow {
    border-right: 6px solid #fff;
    left: 50%;
    margin-left: -17px;
}

.handle-right-arrow {
    border-left: 6px solid #fff;
    right: 50%;
    margin-right: -17px;
}

.bal-handle::before {
    bottom: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgb(12, 12, 12);
}

.bal-handle::after {
    top: 50%;
    margin-top: 20.5px;
    box-shadow: 0 0 5px rgb(12, 12, 12);
}

.bal-handle::before,
.bal-handle::after {
    content: " ";
    display: block;
    width: 2px;
    background: #fff;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
}

    <div class="mainSection">
    
        <div id="one" class="bal-container">
            <div class="bal-after">
                <img src="https://img1.fonwall.ru/o/qc/animal-pet-cat-mammal.jpeg?auto=compress&amp;fit=resize&amp;w=1200&amp;display=large">
                <div class="bal-afterPosition afterLabel">
                    After
                </div>
            </div>
    
            <div class="bal-before">
                <div class="bal-before-inset">
                    <img src="https://w-dog.ru/wallpapers/5/18/289291145046987/evropejskaya-koshka-dikij-kot-morda-vzglyad.jpg">
                    <div class="bal-beforePosition beforeLabel">
                        Before
                    </div>
                </div>
            </div>
    
            <div class="bal-handle">
                <span class=" handle-left-arrow"></span>
                <span class="handle-right-arrow"></span>
            </div>
    
        </div>
    
        <div id="two" class="bal-container">
            <div class="bal-after">
                <img src="https://img1.fonwall.ru/o/qc/animal-pet-cat-mammal.jpeg?auto=compress&amp;fit=resize&amp;w=1200&amp;display=large">
                <div class="bal-afterPosition afterLabel">
                    After
                </div>
            </div>
            <div class="bal-before">
                <div class="bal-before-inset">
                    <img src="https://w-dog.ru/wallpapers/5/18/289291145046987/evropejskaya-koshka-dikij-kot-morda-vzglyad.jpg">
                    <div class="bal-beforePosition beforeLabel">
                        Before
                    </div>
    
                </div>
            </div>
            <div class="bal-handle">
                <span class="handle-left-arrow"></span>
                <span class="handle-right-arrow"></span>
    
            </div>
        </div>
    
        <div id="three" class="bal-container">
            <div class="bal-after">
                <img src="https://img1.fonwall.ru/o/qc/animal-pet-cat-mammal.jpeg?auto=compress&amp;fit=resize&amp;w=1200&amp;display=large">
                <div class="bal-afterPosition afterLabel">
                    After
                </div>
            </div>
            <div class="bal-before">
                <div class="bal-before-inset">
                    <img src="https://w-dog.ru/wallpapers/5/18/289291145046987/evropejskaya-koshka-dikij-kot-morda-vzglyad.jpg">
                    <div class="bal-beforePosition beforeLabel">
                        Before
                    </div>
    
                </div>
            </div>
            <div class="bal-handle">
                <span class="handle-left-arrow"></span>
                <span class="handle-right-arrow"></span>
    
            </div>
        </div>
    </div>

Майя

Asked: 2024-07-04 14:44:34 +0800 CST

通过 js 在高度上实现按钮的平滑外观

5

当鼠标悬停在块上时，需要通过 js 来实现按钮的平滑外观，通过网格不合适，也可以通过 css，只需要通过 js 提前感谢。

.box__inner-btn {
  display: none;
}
.box__inner:hover .box__inner-btn {
  display: block;
}

                <div class="box">
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                </div>

Майя

Asked: 2024-06-27 11:57:07 +0800 CST

如何制作这样的网格？ [关闭]

4

关闭。这个问题需要澄清或者补充细节。目前不接受对此问题的答复。

想要改进这个问题吗？通过编辑这篇文章添加更多详细信息并澄清问题。

昨天关门了。

改进问题

如何制作一个网格，以便当添加更多内容时，后续内容也会出现？

Майя

Asked: 2024-06-14 02:19:43 +0800 CST

如何制作“更多”按钮来裁剪文本js

6

通过单击按钮，将显示隐藏的文本。需要通过js来实现。使用js裁剪文本。这样“更多”按钮就会变为“隐藏”

有一个代码示例，但现在不能正常工作

let textHolder = document.querySelector('.demo');
let fullText = textHolder.innerHTML;
let btn = document.querySelectorAll('.btns');
let textStatus = 'full';

function Truancate(textHolder, limit) {
  let txt = textHolder.innerHTML;
  if (txt.length > limit) {
    let newText = txt.substr(0, limit) + ' ...';
    textHolder.innerHTML = newText;
    textStatus = 'truncated';
  }
}

Truancate(textHolder, textHolder.offsetWidth / 3.39);

function toggleText() {
  if (textStatus === 'truncated') {
    textHolder.innerHTML = fullText;
    textStatus = 'full';
  } else {
    Truancate(textHolder, textHolder.offsetWidth / 3.32);
  }
}

btn.forEach((btns) => {
  btns.addEventListener('click', toggleText);
});

 <div class="box">
   <span class="demo" id="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
    <span class="btns">Еще</span>
</div>
<br>

 <div class="box">
   <span class="demo" id="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
    <span class="btns">Еще</span>
</div>

Майя

Asked: 2024-05-11 13:20:06 +0800 CST

如何在 CSS 中创建这样一个带有文本的形状？

5

告诉我，是否可以使用 CSS 创建这样的形状？

Майя

Asked: 2024-04-23 17:37:18 +0800 CST

如何从计数器中删除逗号？

3

如何从计数器中删除这些逗号，你只需要做空格

class countUp {
  constructor(el) {
    this.el = el;
    this.setVars();
    this.init();
  }

  setVars() {
    this.number = this.el.querySelectorAll("[data-countup-number]");
    this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const end = parseFloat(
          entry.target.dataset.countupNumber.replace(/,/g, "")
        );
        const decimals = this.countDecimals(end);
        if (entry.isIntersecting) {
          this.iterateValue(entry.target, end, decimals);
        }
      });
    }, this.observerOptions);
  }

  init() {
    if (this.number.length > 0) {
      this.number.forEach((el) => {
        this.observer.observe(el);
      });
    }
  }

  iterateValue(el, end, decimals) {
    const start = 0;
    const duration = 2500;
    let startTimestamp = null;

    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const elapsedPercent = (timestamp - startTimestamp) / duration;
      const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
      let interimNumber = Math.abs(easedProgress * (end - start) + start);
      el.innerHTML = this.formatNumber(interimNumber, decimals);
      if (easedProgress < 1) {
        window.requestAnimationFrame(step);
      }
    };

    // requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
    window.requestAnimationFrame(step);
  }

  easeOutQuad(x) {
    return 1 - Math.pow(1 - x, 3);
  }

  easeOutQuint(x) {
    return 1 - Math.pow(1 - x, 5);
  }

  countDecimals(val) {
    if (Math.floor(val) === val) return 0;
    return val.toString().split(".")[1].length || 0;
  }

  formatNumber(val, decimals) {
    return val.toLocaleString("en-US", {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    });
  }
}

// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];

dataModules.forEach((element) => {
  element.dataset.module.split(" ").forEach(function () {
    new countUp(element);
  });
});

<div data-module="countup">
  <div class="concept__wrapper_quantity-inner">
  <p data-countup-number="120000">120 000</p>
  </div>

  <div class="concept__wrapper_quantity-inner">
     <p data-countup-number="45000">45 000</p>
  </div>
</div

[![在此处输入图像描述][1]][1]如何不使用逗号而是使用空格分隔数字？

class countUp {
  constructor(el) {
    this.el = el;
    this.setVars();
    this.init();
  }

  setVars() {
    this.number = this.el.querySelectorAll("[data-countup-number]");
    this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const end = parseFloat(
          entry.target.dataset.countupNumber.replace(/,/g, "")
        );
        const decimals = this.countDecimals(end);
        if (entry.isIntersecting) {
          this.iterateValue(entry.target, end, decimals);
        }
      });
    }, this.observerOptions);
  }

  init() {
    if (this.number.length > 0) {
      this.number.forEach((el) => {
        this.observer.observe(el);
      });
    }
  }

  iterateValue(el, end, decimals) {
    const start = 0;
    const duration = 2500;
    let startTimestamp = null;

    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const elapsedPercent = (timestamp - startTimestamp) / duration;
      const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
      let interimNumber = Math.abs(easedProgress * (end - start) + start);
      el.innerHTML = this.formatNumber(interimNumber, decimals);
      if (easedProgress < 1) {
        window.requestAnimationFrame(step);
      }
    };

    // requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
    window.requestAnimationFrame(step);
  }

  easeOutQuad(x) {
    return 1 - Math.pow(1 - x, 3);
  }

  easeOutQuint(x) {
    return 1 - Math.pow(1 - x, 5);
  }

  countDecimals(val) {
    if (Math.floor(val) === val) return 0;
    return val.toString().split(".")[1].length || 0;
  }

  formatNumber(val, decimals) {
    return val.toLocaleString("en-US", {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    });
  }
}

// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];

dataModules.forEach((element) => {
  element.dataset.module.split(" ").forEach(function () {
    new countUp(element);
  });
});

Майя

Asked: 2024-04-18 15:34:47 +0800 CST

查看幻灯片时如何向滑动滑块活动类添加分页？

3

- 它应该是什么样子的图片如何在查看幻灯片时将活动类添加到分页，反之亦然，在倒回 Swiper 滑块时将其删除也许您可以以某种方式制作自定义进度条我将非常感谢编写一个函数这是我的代码

var swiper = new Swiper(".repair-calc_slider", {
navigation: {
  nextEl: ".repair-calc-next",
  prevEl: ".repair-calc-prev",
},
pagination: {
    el: ".repair-calc-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  },

});

如何使用 css mask 制作这样的形状？

告诉我这样的卡是怎么卖的？

如何使用js css html实现两个块的无尽垂直动画

swiper如何解决分页01、02、03-010等的问题

如何获取最后一个可见的滑动幻灯片

如何打开手风琴的第一个元素？

如何在单击另一个文本时隐藏元素外部的文本？

有谁知道如何进行这种类型的分页？刷卡器

如何制作这样的图形？关于CSS

Yandex 是否有带有过滤器的地图，如何通过单击按钮靠近某个标记？

如何制作多个“显示更多”按钮？

如何在不使用new的情况下调用多个滑块？

通过 js 在高度上实现按钮的平滑外观

如何制作这样的网格？ [关闭]

如何制作“更多”按钮来裁剪文本js

如何在 CSS 中创建这样一个带有文本的形状？

如何从计数器中删除逗号？

查看幻灯片时如何向滑动滑块活动类添加分页？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

Майя's questions