Как использовать onmousemove фактическую точку положения ящика - PullRequest
Новая
       89

Как использовать onmousemove фактическую точку положения ящика

0 голосов
/ 05 февраля 2020

Я пытаюсь использовать фактическое положение блока onmousemove, но все еще не получаю правильного ответа, когда я перемещаю мышь по документу, блок выглядит так, как будто он не начинает свою собственную позицию, поэтому переход также не работает идеально. Мне нужно мое решение javascript, я попытался добавить некоторое число между clientX и clientY , но все равно выглядит не так, как я хотел. Это должно быть как e.clientX - 100 для соответствия позиции, но я не могу понять концепцию, пожалуйста, позвольте мне помочь. см. мой фрагмент ниже, 

   document.onmousemove = function(e){
        let span = document.querySelectorAll('[class*="span"]');
        let x = e.clientX;
        let y = e.clientY;
        span[0].setAttribute('style', `top: ${y}px; left: ${x}px;`);
        span[1].setAttribute('style', `top: ${y}px; left: ${x}px;`);
        span[2].setAttribute('style', `top: ${y}px; left: ${x}px;`);
        span[3].setAttribute('style', `top: ${y}px; left: ${x}px;`);
        span[4].setAttribute('style', `top: ${y}px; left: ${x}px;`);
    }
     body{
            overflow: hidden;
        }
    [class*="span"]{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: red;
    }
    .span1{
        transition: 1s;
    }
    .span2{
        transition: .8s;
    }
    .span3{
        transition: .6s;
    }
    .span4{
        transition: .4s;
    }
    .span5{
        transition: .2s;
    }
    img{
        width: inherit;
        height: inherit;
    }

    h1{
        color: #fff;
        -webkit-text-stroke: 1px black;
        text-align: center;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 5rem;
    }
    <h1>Lorem ipsum dolor sit amet.</h1>
    <base href="https://cdn.pixabay.com/photo/">
    <div class="span1"><img src="2020/01/14/04/25/apricot-4764024__340.jpg" alt=""></div>
    <div class="span2"><img src="2020/02/02/09/15/aerial-4812437__340.jpg" alt=""></div>
    <div class="span3"><img src="2020/02/02/23/50/nature-4814418__340.jpg" alt=""></div>
    <div class="span4"><img src="2020/01/30/19/53/paraglider-4806383__340.jpg" alt=""></div>
    <div class="span5"><img src="2020/01/16/13/15/wood-anemone-4770523__340.jpg" alt=""></div>
...