Помогите изменить .mousemove()

424
03 июня 2017, 16:30

Доброго времени суток. Переписывая слайдер, столкнулся с проблемой: событие мыши .mousemove() мне не совсем понятно. Представляю, как оно работает, однако не могу написать правильные строчки кода. Необходимо, чтобы при наведении курсора мыши на слайд, тот разворачивался на 75% экрана, а остальные разбегались в стороны и уменьшались до 5% каждый.

Демо

Кадр из презентации:

$(document).ready(function() { 
  const $cont = $('.cont'); 
  const $slide = $('.slide'); 
  const $closeBtn = $('.slide__close') 
  const $text = $('.slide__text'); 
  const $iconTwitter = $('.icon-link--twitter'); 
  const numSlides = 6; 
  const initialAnimDur = 5705; 
  const animDelay = 1000; 
  let initialAnim = true; 
  let clickAnim = false; 
 
  $(document).on('click', '.slide__bg-dark', function() { 
    if (initialAnim || clickAnim) return; 
    let _this = $(this).parent(); 
    let target = +_this.attr('data-target'); 
    clickAnim = true; 
 
    _this.css({ 
      'transform': 'translate3d(-100%, 0, 0)', 
      'transition': '750ms', 
      'cursor': 'default' 
    }) 
 
    _this.find('.slide__img-wrapper').css({ 
      'transform': 'translate3d(0, 0, 0) scale(.95, .95)', 
      'transition': '2000ms' 
    }) 
 
    for (let i = target, length = $slide.length; i < length; i++) { 
      $('.slide--' + (i + 1)).css({ 
        'transform': 'translate3d(0, 0, 0)', 
        'transition': '750ms' 
      }) 
    } 
 
    for (let i = target, length = $slide.length; i > 1; i--) { 
      $('.slide--' + (i - 1)).css({ 
        'transform': 'translate3d(-125%, 0, 0)', 
        'transition': '750ms' 
      }) 
    } 
 
    setTimeout(function() { 
      $slide.not(_this).find('.slide__bg-dark').css({ 
        'opacity': '0' 
      }) 
    }, 750) 
 
    $closeBtn.addClass('show-close'); 
    $iconTwitter.addClass('icon-show'); 
 
    _this.find('.slide__text').css({ 
      'transform': 'translate3d(150px, -40%, 0)', 
      'opacity': '1', 
      'transition': '2000ms', 
      '-webkit-transition': '2000ms' 
    }) 
  }); 
 
  $(document).on('mousemove', '.slide', function() { 
    if (initialAnim || clickAnim) return; 
    let _this = $(this); 
    let target = +_this.attr('data-target'); 
 
    _this.css({ 
      'transform': 'translate3d(-' + (((100 / numSlides) * (numSlides - (target - 1))) + 7) + '%, 0, 0)', 
      'transition': '750ms' 
    }) 
 
    _this.find('.slide__text').css({ 
      'transform': 'translate3d(0, -20%, 0) rotate(0.01deg)', 
      '-moz-transform': 'translate3d(0, -20%, 0) rotate(0.01deg)', 
      'opacity': '1', 
      'transition': '750ms', 
      '-webkit-transition': '750ms' 
    }) 
 
    for (let i = target, length = $slide.length; i < length; i++) { 
      $('.slide--' + (i + 1)).css({ 
        'transform': 'translate3d(-' + (((100 / numSlides) * (numSlides - ((i + 1) - 1))) - 7) + '%, 0, 0)', 
        'transition': '750ms' 
      }) 
    } 
 
    for (let i = target; i > 1; i--) { 
      $('.slide--' + (i - 1)).css({ 
        'transform': 'translate3d(-' + (((100 / numSlides) * (numSlides - ((i - 1) - 1))) + 7) + '%, 0, 0)', 
        'transition': '750ms' 
      }) 
    } 
 
    _this.find('.slide__img-wrapper').css({ 
      'transform': 'translate3d(-200px, 0, 0) scale(.85, .85)', 
      'transition': '750ms' 
    }) 
 
    $slide.not(_this).find('.slide__img-wrapper').css({ 
      'transform': 'translate3d(-200px, 0, 0) scale(.90, .90)', 
      'transition': '1000ms' 
    }) 
 
    $slide.not(_this).find('.slide__bg-dark').css({ 
      'opacity': '0' 
    }) 
  }); 
 
  $(document).on('mouseleave', '.slide', function() { 
    if (initialAnim || clickAnim) return; 
    let _this = $(this); 
    let target = +_this.attr('data-target'); 
 
    for (let i = 1, length = $slide.length; i <= length; i++) { 
      $('.slide--' + i).css({ 
        'transform': 'translate3d(-' + (100 / numSlides) * (numSlides - (i - 1)) + '%, 0, 0)', 
        'transition': '1000ms' 
      }) 
    } 
 
    $slide.find('.slide__img-wrapper').css({ 
      'transform': 'translate3d(-200px, 0, 0) scale(1, 1)', 
      'transition': '750ms' 
    }) 
 
    $slide.find('.slide__bg-dark').css({ 
      'opacity': '0' 
    }) 
 
    $text.css({ 
      'transform': 'translate3d(0, -50%, 0) rotate(0.01deg)', 
      'opacity': '0', 
      'transition': '200ms', 
      '-webkit-transition': '200ms' 
    }) 
  }); 
 
  $(document).on('click', '.slide__close', function() { 
 
    setTimeout(function() { 
      clickAnim = false; 
    }, 1000); 
 
    $closeBtn.removeClass('show-close'); 
    $iconTwitter.removeClass('icon-show'); 
 
    for (let i = 1, length = $slide.length; i <= length; i++) { 
      $('.slide--' + i).css({ 
        'transform': 'translate3d(-' + (100 / numSlides) * (numSlides - (i - 1)) + '%, 0, 0)', 
        'transition': '1000ms', 
        'cursor': 'pointer' 
      }) 
    } 
 
    $text.css({ 
      'transform': 'translate3d(150px, -40%, 0)', 
      'opacity': '0', 
      'transition': '200ms', 
      '-webkit-transition': '200ms' 
    }) 
 
    setTimeout(function() { 
      $text.css({ 
        'transform': 'translate3d(0, -50%, 0)' 
      }) 
    }, 200) 
  }) 
 
  setTimeout(function() { 
    $cont.addClass('active'); 
  }, animDelay); 
 
  setTimeout(function() { 
    initialAnim = false; 
  }, initialAnimDur + animDelay); 
 
});
@font-face { 
  font-family: Adineue; 
  src: url(../fonts/adineue.ttf); 
} 
 
header { 
  height: 100vh; 
  background-color: #141516; 
} 
 
html { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  font-family: 'Adineue', sans-serif; 
} 
 
.logo { 
  position: fixed; 
  cursor: pointer; 
  margin-top: 48vh; 
  margin-left: 1.5vw; 
} 
 
.lang { 
  position: fixed; 
  cursor: pointer; 
  margin-top: 90vh; 
  margin-left: 3.25vw; 
  color: #fff; 
} 
 
.lang h2 { 
  font-size: 18px; 
  font-weight: 100; 
} 
 
.nav-active { 
  z-index: 1; 
} 
 
*, 
*:before, 
*:after { 
  -webkit-box-sizing: inherit; 
  box-sizing: inherit; 
  margin: 0; 
  padding: 0; 
} 
 
@media screen and (max-width: 640px) { 
  header { 
    height: 10vh; 
  } 
} 
 
.cont { 
  position: relative; 
  height: 100vh; 
  overflow: hidden; 
  background-image: url('http://imgur.com/jDhPVtQ.png'); 
  background-size: cover; 
} 
 
.slide { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  will-change: transform; 
  overflow: hidden; 
  cursor: pointer; 
  border-left: 1px solid black; 
} 
 
.slide__bg { 
  position: absolute; 
  top: 0; 
  left: 0; 
  -webkit-transform-origin: center left; 
  transform-origin: center left; 
  width: 100%; 
  height: 100%; 
  background-color: #fff; 
  z-index: 1; 
  -webkit-transition: 950ms; 
  transition: 950ms; 
  will-change: transform; 
} 
 
.slide__img { 
  position: relative; 
  height: 100%; 
} 
 
.slide__img-wrapper { 
  position: absolute; 
  top: -10%; 
  left: -10%; 
  width: 125%; 
  height: 120%; 
  -webkit-transform: translate3d(0, 0, 0); 
  transform: translate3d(0, 0, 0); 
  -webkit-transition: 950ms; 
  transition: 950ms; 
  will-change: transform; 
} 
 
.slide__close { 
  position: absolute; 
  top: 5%; 
  left: 5%; 
  width: 100px; 
  height: 100px; 
  z-index: 0; 
  opacity: 0; 
  cursor: pointer; 
  -webkit-transition: opacity 200ms, z-index 0ms 200ms; 
  transition: opacity 200ms, z-index 0ms 200ms; 
} 
 
.slide__close:after, 
.slide__close:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 115px; 
  height: 20px; 
  border-radius: 20px; 
  background-color: #fff; 
  -webkit-transition: 500ms 500ms; 
  transition: 500ms 500ms; 
} 
 
.slide__text--1 { 
  opacity: 1; 
} 
 
@media screen and (max-width: 960px) { 
  .slide__close:after, 
  .slide__close:before { 
    width: 75px; 
    height: 15px; 
  } 
} 
 
.slide__close:after { 
  -webkit-transform-origin: center left; 
  transform-origin: center left; 
  -webkit-transform: rotate(45deg) scale(0, 0); 
  transform: rotate(45deg) scale(0, 0); 
} 
 
.slide__close:before { 
  left: -33px; 
  -webkit-transform-origin: center right; 
  transform-origin: center right; 
  -webkit-transform: rotate(-45deg) scale(0, 0); 
  transform: rotate(-45deg) scale(0, 0); 
  -webkit-transition: 500ms 650ms; 
  transition: 500ms 650ms; 
} 
 
@media screen and (max-width: 960px) { 
  .slide__close:before { 
    left: -21px; 
  } 
} 
 
.slide__bg-dark { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
  opacity: 0; 
  -webkit-transition: 350ms; 
  transition: 350ms; 
  z-index: 2; 
} 
 
.slide__text { 
  position: absolute; 
  top: 50%; 
  left: 5%; 
  width: 23%; 
  text-transform: uppercase; 
  word-wrap: break-word; 
  color: #fff; 
  font-size: 45px; 
  font-weight: 800; 
  -webkit-transform: translate3d(0, -50%, 0) rotate(0.01deg); 
  transform: translate3d(0, -50%, 0) rotate(0.01deg); 
  will-change: transform, opacity; 
  -webkit-transition: 750ms; 
  transition: 750ms; 
  opacity: 0; 
  z-index: 3; 
  text-decoration: none; 
} 
 
.slide__text a { 
  text-decoration: none; 
  color: #fff; 
} 
 
.slide-info { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: column; 
  flex-direction: column; 
} 
 
.arrow { 
  -webkit-transform: rotate(270deg); 
  transform: rotate(270deg); 
  color: #e64e4e; 
  font-size: 18px; 
  margin-left: -20vw; 
  margin-top: -20vh; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
} 
 
@media screen and (max-width: 960px) { 
  .slide__text { 
    font-size: 30px; 
  } 
} 
 
.slide__text--1 { 
  left: 8%; 
} 
 
.slide { 
  left: 100%; 
} 
 
.slide--1 { 
  z-index: 0; 
} 
 
.slide--2 { 
  z-index: 0; 
} 
 
.slide--3 { 
  z-index: 0; 
} 
 
.slide--4 { 
  z-index: 0; 
} 
 
.slide--5 { 
  z-index: 0; 
} 
 
.slide--6 { 
  z-index: 0; 
} 
 
.page-content { 
  position: absolute; 
  bottom: 10px; 
  right: 10px; 
  width: 50px; 
  opacity: 0; 
  z-index: -1; 
} 
 
.page-show { 
  opacity: 1; 
  z-index: 7; 
} 
 
.active .slide--1 .slide__bg { 
  -webkit-transform: scale(0, 1); 
  transform: scale(0, 1); 
  -webkit-transition: 950ms; 
  transition: 950ms; 
} 
 
.active .slide--1 .slide__img-wrapper { 
  -webkit-transform: translate3d(-150px, 0, 0); 
  transform: translate3d(-150px, 0, 0); 
  -webkit-transition: 2000ms; 
  transition: 2000ms; 
} 
 
.active .slide--1 { 
  -webkit-transform: translate3d(-100%, 0, 0); 
  transform: translate3d(-100%, 0, 0); 
  -webkit-transition: -webkit-transform 950ms 0ms; 
  transition: -webkit-transform 950ms 0ms; 
  transition: transform 950ms 0ms; 
  transition: transform 950ms 0ms, -webkit-transform 950ms 0ms; 
} 
 
.active .slide--1 .slide__bg { 
  -webkit-transform: scale(0, 1); 
  transform: scale(0, 1); 
  -webkit-transition: 1900ms 0ms; 
  transition: 1900ms 0ms; 
} 
 
.active .slide--1 .slide__img-wrapper { 
  -webkit-transform: translate3d(-150px, 0, 0); 
  transform: translate3d(-150px, 0, 0); 
  -webkit-transition: 2000ms 0ms; 
  transition: 2000ms 0ms; 
} 
 
.active .slide--2 { 
  -webkit-transform: translate3d(-25%, 0, 0); 
  transform: translate3d(-25%, 0, 0); 
  -webkit-transition: -webkit-transform 950ms 1235ms; 
  transition: -webkit-transform 950ms 1235ms; 
  transition: transform 950ms 1235ms; 
  transition: transform 950ms 1235ms, -webkit-transform 950ms 1235ms; 
} 
 
.active .slide--2 .slide__bg { 
  -webkit-transform: scale(0, 1); 
  transform: scale(0, 1); 
  -webkit-transition: 1900ms 1235ms; 
  transition: 1900ms 1235ms; 
} 
 
.active .slide--2 .slide__img-wrapper { 
  -webkit-transform: translate3d(-150px, 0, 0); 
  transform: translate3d(-150px, 0, 0); 
  -webkit-transition: 2000ms 1235ms; 
  transition: 2000ms 1235ms; 
} 
 
.active .slide--3 { 
  -webkit-transform: translate3d(-20%, 0, 0); 
  transform: translate3d(-20%, 0, 0); 
  -webkit-transition: -webkit-transform 950ms 2470ms; 
  transition: -webkit-transform 950ms 2470ms; 
  transition: transform 950ms 2470ms; 
  transition: transform 950ms 2470ms, -webkit-transform 950ms 2470ms; 
} 
 
.active .slide--3 .slide__bg { 
  -webkit-transform: scale(0, 1); 
  transform: scale(0, 1); 
  -webkit-transition: 1900ms 2470ms; 
  transition: 1900ms 2470ms; 
} 
 
.active .slide--3 .slide__img-wrapper { 
  -webkit-transform: translate3d(-150px, 0, 0); 
  transform: translate3d(-150px, 0, 0); 
  -webkit-transition: 2000ms 2470ms; 
  transition: 2000ms 2470ms; 
} 
 
.active .slide--4 { 
  -webkit-transform: translate3d(-15%, 0, 0); 
  transform: translate3d(-15%, 0, 0); 
  -webkit-transition: -webkit-transform 950ms 3705ms; 
  transition: -webkit-transform 950ms 3705ms; 
  transition: transform 950ms 3705ms; 
  transition: transform 950ms 3705ms, -webkit-transform 950ms 3705ms; 
} 
 
.active .slide--4 .slide__bg { 
  -webkit-transform: scale(0, 1); 
  transform: scale(0, 1); 
  -webkit-transition: 1900ms 3705ms; 
  transition: 1900ms 3705ms; 
} 
 
.active .slide--4 .slide__img-wrapper { 
  -webkit-transform: translate3d(-150px, 0, 0); 
  transform: translate3d(-150px, 0, 0); 
  -webkit-transition: 2000ms 3705ms; 
  transition: 2000ms 3705ms; 
} 
 
.active .slide--5 { 
  -webkit-transform: translate3d(-10%, 0, 0); 
  transform: translate3d(-10%, 0, 0); 
  -webkit-transition: -webkit-transform 950ms 5040ms; 
  transition: -webkit-transform 950ms 5040ms; 
  transition: transform 950ms 5040ms; 
  transition: transform 950ms 5040ms, -webkit-transform 950ms 5040ms; 
} 
 
.active .slide--5 .slide__bg { 
  -webkit-transform: scale(0, 1); 
  transform: scale(0, 1); 
  -webkit-transition: 1900ms 5040ms; 
  transition: 1900ms 5040ms; 
} 
 
.active .slide--5 .slide__img-wrapper { 
  -webkit-transform: translate3d(-150px, 0, 0); 
  transform: translate3d(-150px, 0, 0); 
  -webkit-transition: 2000ms 5040ms; 
  transition: 2000ms 5040ms; 
} 
 
.active .slide--6 { 
  -webkit-transform: translate3d(-5%, 0, 0); 
  transform: translate3d(-5%, 0, 0); 
  -webkit-transition: -webkit-transform 950ms 6275ms; 
  transition: -webkit-transform 950ms 6275ms; 
  transition: transform 950ms 6275ms; 
  transition: transform 950ms 6275ms, -webkit-transform 950ms 6275ms; 
} 
 
.active .slide--6 .slide__bg { 
  -webkit-transform: scale(0, 1); 
  transform: scale(0, 1); 
  -webkit-transition: 1900ms 6275ms; 
  transition: 1900ms 6275ms; 
} 
 
.active .slide--6 .slide__img-wrapper { 
  -webkit-transform: translate3d(-150px, 0, 0); 
  transform: translate3d(-150px, 0, 0); 
  -webkit-transition: 2000ms 6275ms; 
  transition: 2000ms 6275ms; 
} 
 
.show-close { 
  z-index: 6; 
  opacity: 1; 
} 
 
.show-close:after { 
  -webkit-transform: rotate(45deg) scale(1, 1); 
  transform: rotate(45deg) scale(1, 1); 
} 
 
.show-close:before { 
  -webkit-transform: rotate(-45deg) scale(1, 1); 
  transform: rotate(-45deg) scale(1, 1); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>ROFAS</title> 
  <link rel="stylesheet" href="css/slider.css"> 
  <link rel="stylesheet" href="css/experiment.css"> 
  <link rel="stylesheet" href="css/overlay.css"> 
  <link rel="stylesheet" href="https://use.fontawesome.com/8770d2be1c.css"> 
  <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous"> 
  <!--[if lte IE 8]> 
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css"> 
<![endif]--> 
  <!--[if gt IE 8]><!--> 
  <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css"> 
  <!--<![endif]--> 
  <script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
</head> 
 
<body> 
  <div class="pure-g"> 
    <div class="pure-u-1 pure-u-sm-1 pure-u-md-11-12 cont"> 
      <div data-target='1' class="slide slide--1"> 
        <div class="slide__text slide__text--1"> 
          <div class="slide-roof"> 
            Rofas <br />Roof 
            <a href="slide1.html"> 
              <div class="arrow"> 
                <span class="fa fa-arrow-left" style="margin-right: 15px"></span> 
                <span class="rotate">Rofas Roof</span> 
              </div> 
            </a> 
          </div> 
        </div> 
        <div class="slide__bg"></div> 
        <div class="slide__img"> 
          <div class="slide__close"></div> 
        </div> 
        <div class="slide__bg-dark"></div> 
      </div> 
 
      <div data-target='2' class="slide slide--2"> 
        <div class="slide__text"><a href="slide2.html">Rofas <br />Фасад</a></div> 
        <div class="slide__bg"></div> 
        <div class="slide__img"> 
          <div class="slide__close"></div> 
          <div class="slide__img-wrapper"> 
 
          </div> 
        </div> 
        <div class="slide__bg-dark"></div> 
        <div class="content-page">LOREM IPSUM</div> 
      </div> 
 
      <div data-target='3' class="slide slide--3"> 
        <div class="slide__text"><a href="slide3.html">Rofas <br />Design</a></div> 
        <div class="slide__bg"></div> 
        <div class="slide__img"> 
          <div class="slide__close"></div> 
          <div class="slide__img-wrapper"> 
 
          </div> 
        </div> 
        <div class="slide__bg-dark"></div> 
        <div class="content-page">LOREM IPSUM</div> 
      </div> 
 
      <div data-target='4' class="slide slide--4"> 
        <div class="slide__text"><a href="slide4.html">Rofas <br />Industry</a></div> 
        <div class="slide__bg"></div> 
        <div class="slide__img"> 
          <div class="slide__close"></div> 
          <div class="slide__img-wrapper"> 
 
          </div> 
        </div> 
        <div class="slide__bg-dark"></div> 
        <div class="content-page">LOREM IPSUM</div> 
      </div> 
 
      <div data-target='5' class="slide slide--5"> 
        <div class="slide__text"><a href="slide5.html">Rofas <br />Eco</a></div> 
        <div class="slide__bg"></div> 
        <div class="slide__img"> 
          <div class="slide__close"></div> 
          <div class="slide__img-wrapper"> 
 
          </div> 
        </div> 
        <div class="slide__bg-dark"></div> 
        <div class="content-page">LOREM IPSUM</div> 
      </div> 
 
      <div data-target='6' class="slide slide--6"> 
        <div class="slide__text"><a href="slide6.html">Rofas <br />Stone</a></div> 
        <div class="slide__bg"></div> 
        <div class="slide__img"> 
          <div class="slide__close"></div> 
          <div class="slide__img-wrapper"> 
 
          </div> 
        </div> 
        <div class="slide__bg-dark"></div> 
        <div class="content-page">LOREM IPSUM</div> 
      </div> 
    </div> 
  </div> 
  <script src="js/overlay.js"></script> 
  <script src="js/slider.js"></script> 
  <script> 
    $(function() { 
      $('.slide--1').mousemove(function() { 
        $('.cont').css('background-image', 'url("http://imgur.com/hB8aJFm.png")'); 
      }); 
      $('.slide--2').mousemove(function() { 
        $('.cont').css('background-image', 'url("http://imgur.com/W1Ls4no.png")'); 
      }); 
      $('.slide--3').mousemove(function() { 
        $('.cont').css('background-image', 'url("http://imgur.com/WxvtKPn.png")'); 
      }); 
      $('.slide--4').mousemove(function() { 
        $('.cont').css('background-image', 'url("http://imgur.com/kX6ESJC.png")'); 
      }); 
      $('.slide--5').mousemove(function() { 
        $('.cont').css('background-image', 'url("http://imgur.com/F8gOvF4.png")'); 
      }); 
      $('.slide--6').mousemove(function() { 
        $('.cont').css('background-image', 'url("http://imgur.com/rMfd0mo.png")'); 
      }); 
      $('.slide--1').mouseleave(function() { 
        $('slide__text--1').css('opacity', 0); 
      }); 
    }); 
  </script> 
</body> 
 
</html>

READ ALSO
Как сделать кнопку поверх картинки?

Как сделать кнопку поверх картинки?

Есть галерея из картинок типа:

546
Doctrine 1.2, автоматическое обрезание для полей в таблице

Doctrine 1.2, автоматическое обрезание для полей в таблице

Использую Doctrine 12 При изменении/добавлении записи получаю исключение

397
Лишняя строка при обращении к БД

Лишняя строка при обращении к БД

Всем доброго времениСуть вопроса такова : есть 2 таблицы - первая: Куплено и вторая: Продано

388