Ответы пользователя по тегу JavaScript
  • Сделать карусель фото с помощью JavaScript?

    sharp97
    @sharp97
    не фонтан но брызги есть
    самый простой варик как по мне
    <div class="gallery_review">
    				 <div class="cssbox">
        <a id="image1" href="#image1"><img class="cssbox_thumb" src="accets/images/review_dunk_low_nike1.jpg"/>
          <span class="cssbox_full"><img src="accets/images/review_dunk_low_nike1.jpg"/></span>
        </a>
        <a class="cssbox_close" href="#void"></a>
        <a class="cssbox_next" href="#image2"></a>
    </div>
      <div class="cssbox">
        <a id="image2" href="#image2"><img class="cssbox_thumb" src="accets/images/review_dunk_low_nike2.jpg"/>
          <span class="cssbox_full"><img src="accets/images/review_dunk_low_nike2.jpg" /></span>
        </a>
        <a class="cssbox_close" href="#void"></a>
        <a class="cssbox_prev" href="#image1"></a>
        <a class="cssbox_next" href="#image3"></a>
      </div>
      		 <div class="cssbox">
        <a id="image3" href="#image3"><img class="cssbox_thumb" src="accets/images/review_dunk_low_nike1.jpg"/>
          <span class="cssbox_full"><img src="accets/images/review_dunk_low_nike1.jpg"/></span>
        </a>
        <a class="cssbox_close" href="#void"></a>
        <a class="cssbox_prev" href="#image2"></a>
        <a class="cssbox_next" href="#image4"></a>
    </div>
    		 <div class="cssbox">
        <a id="image4" href="#image4"><img class="cssbox_thumb" src="accets/images/review_dunk_low_nike1.jpg"/>
          <span class="cssbox_full"><img src="accets/images/review_dunk_low_nike1.jpg"/></span>
        </a>
         <a class="cssbox_close" href="#void"></a>
        <a class="cssbox_prev" href="#image3"></a>
        <a class="cssbox_next" href="#image5"></a>
    </div>
    		 <div class="cssbox">
        <a id="image5" href="#image5"><img class="cssbox_thumb" src="accets/images/review_dunk_low_nike1.jpg"/>
          <span class="cssbox_full"><img src="accets/images/review_dunk_low_nike1.jpg"/></span>
        </a>
        <a class="cssbox_close" href="#void"></a>
        <a class="cssbox_next" href="#image6"></a>
    </div>
    </div>

    /* gallery */
    .gallery_review{
    display: grid;
    width: 70%;
     grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }
    .cssbox_thumb{
      width: 100%;
      height: 100%;
      background-size: cover;
      border-radius: 5px;
    }
    div.cssbox {
      display: inline-block;
    }
    
    span.cssbox_full {
      z-index: 999999;
      position: fixed;
      height: 100%;
      width: 100%;
      background-color: rgba(0,0,0,0.8);
      top: 0;
      left: 0;
      opacity: 0;
      pointer-events: none;
      cursor: default;
      transition: opacity 0.5s linear;
    }
    
    span.cssbox_full img {
      position: fixed;
      background-color: white;
      margin: 0;
      padding: 0;
      max-height: 90%;
      max-width: 90%;
       border-radius: 10px;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px black;
    }
    
    a.cssbox_close,
    a.cssbox_prev,
    a.cssbox_next {
      z-index: 999999;
      position: fixed;
      text-decoration: none;
      visibility: hidden;
      color: white;
      font-size: 36px;
    }
    
    a.cssbox_close {
      top: 1%;
      right: 1%
    }
    
    a.cssbox_close::after {
      content: '\00d7';
    }
    
    a.cssbox_prev,
    a.cssbox_next {
      top: 50%;
      transform: translate(0%, -50%);
      cursor: pointer;
        background-image: url(../images/arrow_click_gallery.svg);
        background-repeat: no-repeat;
        background-size: cover;
        width: clamp(1.5625rem, 1.3599rem + 1.0132vw, 2.330625rem);
        height: clamp(1.5625rem, 1.3599rem + 1.0132vw, 2.330625rem);
    }
    
    a.cssbox_prev {
      left: 5%;
      transform: rotate(360deg);
    }
    
    a.cssbox_next {
      right: 5%;
      transform: rotate(180deg);
    }
    
    a:target ~ a.cssbox_close,
    a:target ~ a.cssbox_prev,
    a:target ~ a.cssbox_next {
      visibility: visible;
    }
    
    a:target > img.cssbox_thumb + span.cssbox_full {
      visibility: visible;
      opacity: 1;
      pointer-events: initial;
    }
    /* end gallery */
    Ответ написан
    Комментировать
  • Как переключить класс у нескольких элементов?

    sharp97
    @sharp97
    не фонтан но брызги есть
    не проверял но по идеи всё окс должно быть, если с запятыми в падлу ему работать будет тогда прост пробелы поставь а запятые убери
    const over = document.querySelectorAll('div.filter, div.chapalak_avtoru_voprosa, div.ninja_america, div.god_of_war');
    			    for(var n = 0; n < over.length; n++) {
        over[n].classList.toggle('acho');
      }

    const row = document.querySelector('.row , .kavo');
    row.classList.toggle('color_swap');
    Ответ написан
    Комментировать
  • Липкое навигационное меню на чистом JS, как сделать?

    sharp97
    @sharp97
    не фонтан но брызги есть
    Если что добавляйте в css
    .fixed{
    position:fixed}

    и всё ок будет работать
    если кому помог мой коммент с вас лик)
    Ответ написан
    Комментировать