Как реализовать такой скрипт на jQuery?

275

19 февраля 2022, 20:40

Как с помощью jquery при нажатии на элемент выезжает контент? И как это можно реализовать? Так же еще есть смена контента в зависимости от нажатой кнопки. Как, например, это реализовано на сайте https://charmerstudio.com/ru (см. раздел с проектами). Изобразил все на gif. Спасибо за внимание. Знаю, что нужно использовать hash(), но как добалять в url id/data-src элемента я не знаю.

Answer 1

Ну вот как-то так. Стиль, анимация и прочее уже по желанию.

p.s. Добавил стиль и анимацию. Так все же интереснее.

$(".menu a") 
  .mouseover(function() { 
    $("div [data-id='" + $(this).attr("href").replace("#", "") + "']").delay("200").fadeIn("500"); 
  }) 
  .mouseout(function() { 
    $("div [data-id]").hide(); 
  });

body, 
html { 
  padding: 0; 
  margin: 0; 
  background-color: black; 
} 
 
.menu { 
  display: block; 
  position: relative; 
  padding-left: 50%; 
  z-index: 2; 
} 
 
.menu li { 
  list-style: none; 
  display: block; 
  padding: 10px 0; 
} 
 
.menu:hover li a { 
  opacity: 0.2; 
  transition: all 1s; 
} 
 
.menu li a { 
  color: white; 
  display: block; 
  font-size: 25px; 
  text-decoration: none; 
} 
 
.menu li a:hover { 
  opacity: 1; 
} 
 
.content { 
  z-index: 1; 
  display: block; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  margin-top: -200px; 
  margin-left: -300px; 
  width: 300px; 
  height: 200px; 
} 
 
.wrapper div { 
  display: none 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="wrapper"> 
  <div class="content" data-id="item-1"> 
    <img src="https://www.salakfilozof.com/wp-content/uploads/2018/11/arabesk-sarkilar.jpg"> 
  </div> 
  <div class="content" data-id="item-2"> 
    <img src="https://www.altkia.com/wp-content/uploads/2015/08/753f93209d86058cb21da037ad2df212.jpg"> 
  </div> 
  <div class="content" data-id="item-3"> 
    <img src="https://www.lider-press.by/images/articles/2018/February/raznoe/Colorful.jpg"> 
  </div> 
</div> 
<ul class="menu"> 
  <li><a href="#item-1">Раз</a></li> 
  <li><a href="#item-2">Два</a></li> 
  <li><a href="#item-3">Три</a></li> 
</ul>

Answer 2

Ты можешь это сделать просто на jQuery.

Добавь к атрибут к элементу ссылки. Допустим data-src="" равный фоновой картинки. И при наведении мыши меняй background у твоего блока с картинкой на картинку которая содержится в data-src.

Эфекты смены картинки добавить по вкусу)

Answer 3

Просто ради спортивного интереса. Изначально вопрос был один и ранее добавленный ответ считался принятым. Но ровно до тех пор, пока вопрос кардинально не изменился, после чего собственно ответ и перестал считаться быть принятым. Спекуляция, однако :)

$(".menu a") 
  .mouseover(function() { 
    $("div [data-id='" + $(this).attr("href").replace("#", "") + "']").delay("200").fadeIn("500"); 
  }) 
  .mouseout(function() { 
    $("div [data-id]").hide(); 
  }); 
 
$(".menu a") 
  .click(function() { 
    var id = $(this).attr('data-tab'), 
      content = $('.content[data-tab="' + id + '"]'); 
    $(".content [data-tab='" + $(this).attr('data-tab').replace("#", "") + "']"); 
    $('.menu a').addClass('menu__li__opacity').removeClass('menu__li__active'); 
    $(this).addClass('menu__li__active'); 
    $('.content').hide(); 
    content.delay('500').slideDown("slow"); 
    $('.img').addClass('img__close'); 
    $('.wrp__img').addClass('wrp__img__passive'); 
    $('.wrp__text').addClass('wrp__text__active'); 
  }); 
 
$('.close_up').click(function() { 
  $('.menu a').removeClass('menu__li__opacity').removeClass('menu__li__active'); 
  $(this).removeClass('menu__li__active'); 
  $('.content').hide(); 
  $('.img').removeClass('img__close'); 
  $('.wrp__img').removeClass('wrp__img__passive'); 
  $('.wrp__text').removeClass('wrp__text__active'); 
});

body, 
html { 
  padding: 0; 
  margin: 0; 
} 
 
.wrapper { 
  position: relative; 
} 
 
.menu { 
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 100; 
  text-align: center; 
} 
 
.menu li { 
  list-style: none; 
  display: block; 
  padding: 10px 0; 
} 
 
.menu:hover li a { 
  opacity: 0.2; 
  transition: all 1s; 
} 
 
.menu li a { 
  color: white; 
  font-size: 25px; 
  text-decoration: none; 
  text-align: center; 
} 
 
.menu li a:hover { 
  opacity: 1; 
} 
 
.menu__li__active { 
  color: red !important; 
  opacity: 1 !important; 
  zoom: 1.2; 
} 
 
.menu__li__opacity { 
  opacity: 0.2; 
} 
 
.img { 
  z-index: 1; 
  display: block; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  margin-top: -200px; 
  margin-left: -300px; 
  width: 300px; 
  height: 200px; 
} 
 
.wrp__img div { 
  display: none 
} 
 
.wrp__img { 
  position: absolute; 
  left: 0; 
  top: 0; 
  bottom: 0; 
  width: 100%; 
  min-height: 100vh; 
  background-color: black; 
  transition: all 1s; 
} 
 
.wrp__img__passive { 
  width: 50%; 
  transition: all 1s; 
} 
 
.wrp__text { 
  display: block; 
  overflow: hidden; 
  position: absolute; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  width: 0%; 
  min-height: 100vh; 
  background-color: white; 
  transition: all 1s; 
} 
 
.wrp__text__active { 
  width: 50%; 
  transition: all 1s; 
} 
 
.wrp__text p { 
  color: black; 
} 
 
.content { 
  display: none; 
  padding: 50px; 
} 
 
.content__active { 
  display: block; 
} 
 
.content h2 { 
  margin: 0; 
  padding: 10px 0; 
  display: block; 
  border-bottom: 1px solid #ccc; 
} 
 
.content img { 
  width: 100%; 
  height: auto; 
  display: block; 
  margin: 10px 0; 
} 
 
.img__close { 
  display: none !important; 
} 
 
.close_up { 
  position: absolute; 
  overflow: hidden; 
  top: 40px; 
  right: 10px; 
  width: 40px; 
  height: 40px; 
  cursor: pointer; 
  background-color: gray; 
  opacity: 0; 
  transition: opacity 0.5s linear; 
} 
 
.wrp__text:hover .close_up { 
  opacity: 1; 
} 
 
.close_up:hover { 
  background-color: black; 
} 
 
.close_up::before, 
.close_up::after { 
  content: ''; 
  position: absolute; 
  height: 2px; 
  width: 100%; 
  top: 50%; 
  left: 0; 
  margin-top: -1px; 
  background: white; 
} 
 
.close_up::before { 
  transform: rotate(45deg); 
} 
 
.close_up::after { 
  transform: rotate(-45deg); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="wrapper"> 
  <div class="wrp__img"> 
    <ul class="menu"> 
      <li><a data-tab="1" href="#item-1">Раз</a></li> 
      <li><a data-tab="2" href="#item-2">Два</a></li> 
      <li><a data-tab="3" href="#item-3">Три</a></li> 
    </ul> 
    <div class="img" data-id="item-1"> 
      <img src="https://www.salakfilozof.com/wp-content/uploads/2018/11/arabesk-sarkilar.jpg"> 
    </div> 
    <div class="img" data-id="item-2"> 
      <img src="https://www.altkia.com/wp-content/uploads/2015/08/753f93209d86058cb21da037ad2df212.jpg"> 
    </div> 
    <div class="img" data-id="item-3"> 
      <img src="https://www.lider-press.by/images/articles/2018/February/raznoe/Colorful.jpg"> 
    </div> 
  </div> 
  <div class="wrp__text"> 
    <div class="content" data-tab="1"> 
      <h2>Раз</h2><img src="https://www.salakfilozof.com/wp-content/uploads/2018/11/arabesk-sarkilar.jpg"></div> 
    <div class="content" data-tab="2"> 
      <h2>Два</h2><img src="https://www.altkia.com/wp-content/uploads/2015/08/753f93209d86058cb21da037ad2df212.jpg"></div> 
    <div class="content" data-tab="3"> 
      <h2>Три</h2><img src="https://www.lider-press.by/images/articles/2018/February/raznoe/Colorful.jpg"></div> 
    <div class="close_up"></div> 
  </div> 
</div>