JAVASCRIPT Увеличивая внутренний HTML номер onmouseover и обратно до 0 onmouseout - PullRequest
Новая
       32

JAVASCRIPT Увеличивая внутренний HTML номер onmouseover и обратно до 0 onmouseout

0 голосов
/ 17 января 2020

Кажется, я нигде не могу найти решение ... В основном, у меня есть измерительный прибор с иглой, которая при наведении на нее вращается. То, что я отлично работал с CSS, хотя, если кто-нибудь может подсказать мне, как это сделать в Javascript, я ценю

Самое главное, мне нужно, чтобы число увеличивалось до go вверх (например, по автомобильной шкале) при перемещении вверх и вниз при использовании внутреннего HTML. Так как же использовать диапазон чисел в Javascript? Мне нужно это go от 0 до 270.

Заранее спасибо :)

HTML: 

<div id="all">
<svg viewBox="0 0 113 111">
  <style>
    .st3{fill:#17ceff}.st4{fill:none}
  </style>

  <path d="M64.2 56.3c0 4.4-3.6 8-8 8-1.4 0-2.7-.4-3.9-1L31.7 80.6l17.5-20.5c-.6-1.1-1-2.4-1-3.8 0-4.4 3.6-8 8-8s8 3.5 8 8z" fill="#252626" stroke="#fff" stroke-width=".47" stroke-miterlimit="10" id="needle"/>

  <div class="result" id="result">0</div>
</svg>
</div>

CSS: 

 #needle {
      transform-origin: inherit;
     transition: 0.70s;
 }

#needle:hover {
    transition: 0.70s;
    transform: rotate(270deg);
}

1 Ответ

0 голосов
/ 17 января 2020 
<div class="whole-container">
        <div class="meter">0</div>
        <div class="needle"></div>
    </div>

Jquery

    var inte;
    $('.whole-container').on('mouseover', function () {
        clearInterval(inte);
        var i = parseInt($('.meter').text());
        inte = setInterval(() => {
            $('.meter').text(i);
            $('.needle').css('transform', 'rotate(' + i + 'deg)');
            if (i == 270) clearInterval(inte);
            i++;
        }, 100);
    });
    $('.whole-container').on('mouseout', function () {
        clearInterval(inte);
        var i = parseInt($('.meter').text());
        inte = setInterval(() => {
            $('.meter').text(i);
            $('.needle').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) clearInterval(inte);
            i--;
        }, 100);
    });

Пожалуйста, внесите изменения в html и классы / идентификаторы сценариев при необходимости

...