Я хочу реализовать этот вид функциональности.

  1. Одна коробка ввода
  2. <input type="text" value="this is sample text larger then input box" style="width: 100px;" />
  3. Это будет выглядеть так:

    Введите описание изображения здесь

  4. Текст не полностью отображается. Поэтому я хочу, чтобы, когда мышь наведите курсор на эту входную коробку, текст должен автоматически прокручивать медленно, как Marquee Tag Inter ввода ввода

  5. Я реализую в угловом угловании, поэтому, если какое-либо решение (взломать), связанное с угловым элементом, как замена элемента, пожалуйста, также упомяните.

  6. Если какое-либо решение (погода использует JS или jQuery или CSS), пожалуйста, помогите мне.

0
Mayur Kukadiya 2 Окт 2019 в 07:41

1 ответ

Лучший ответ

Эта ссылка поможет вам найти свой ответ, он также работает в текстовых полях настроить в соответствии с вами

Пример Marquee

$(document).ready(function() {
  var interval_val = 2;
  var timeout_ = null;
  $(".scroll_contant").on("mouseover", function() {
    var this_ = this;
    timeout_ = setInterval(function() {
      $(this_).scrollLeft(interval_val);
      interval_val++;
    }, 100);
  });

  $(".scroll_contant").on("mouseout", function() {

    clearInterval(timeout_);
    $(this).scrollLeft(0);
  });

})
.scroll_contant {
  overflow: hidden;
  width: 200px;
  background: red;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="scroll_contant" type="text" value="Display the current time (the setInterval() method will execute the function once every 1 second, just like a digital watch). Use clearInterval() to stop time:" />
3
joyBlanks 2 Окт 2019 в 06:14