Я хочу реализовать этот вид функциональности.
- Одна коробка ввода
<input type="text" value="this is sample text larger then input box" style="width: 100px;" />
Это будет выглядеть так:
Текст не полностью отображается. Поэтому я хочу, чтобы, когда мышь наведите курсор на эту входную коробку, текст должен автоматически прокручивать медленно, как Marquee Tag Inter ввода ввода
Я реализую в угловом угловании, поэтому, если какое-либо решение (взломать), связанное с угловым элементом, как замена элемента, пожалуйста, также упомяните.
Если какое-либо решение (погода использует JS или jQuery или CSS), пожалуйста, помогите мне.
1 ответ
Эта ссылка поможет вам найти свой ответ, он также работает в текстовых полях настроить в соответствии с вами
$(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:" />
Похожие вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.