предисловие

Недавно я написал требование к проекту для выделения текста, я только начал писать его на js, и я могу выполнить требование. Позже я подумал о другом способе (html и css соответственно) для достижения того же требования по снижению потребления производительности.

Во-первых, нужен анализ:

Требование 1. Определить длину текста и длину контейнера.Если длина текста больше длины контейнера, запустить прокрутку, иначе не будет прокручиваться;

Требование 2. Определить конец прокрутки и вызвать событие в конце временной точки (например: увеличение или уменьшение стилей и т. д.);

1. JS-реализация

Идеи:

1. Определить длину текста и длину контейнера.Если длина текста больше длины контейнера, запустить прокрутку, иначе не будет прокручиваться. (смещениеШирина)

2. Получить расстояние от полосы прокрутки слева от элемента, рекурсивно прокручивать до тех пор, пока расстояние после прокрутки не станет равным длине текста и выйти из рекурсии. (прокрутка влево)

Если вы не знакомы с offsetWidth, scrollLeft, вы можете нажать здесьoffsetWidth,scrollLeft

визуализация

Примечание. Явление дрожания текста связано с тем, что время записи слишком велико, а файл gif, созданный ps, может быть меньше 500 кадров, а дрожание текста возникает за счет уменьшения частоты кадров. раздел кода

Предварительная демонстрация:JS реализует выделение текста

резюме

Метод js может полностью удовлетворить пункт 1 подзапроса и пункт 2 самозапроса.

О длине текста и контейнера можно судить по offsetWidth. Если длина текста больше длины контейнера, начните прокрутку.

window.onload=function checkScrollLeft(){
  // 判断文字长度是否大于盒子长度
  if(boxWidth >= textWidth){ return false}
  content.innerHTML += content.innerHTML
  document.querySelector('.text').classList.add('padding')
  // 更新
  textWidth = document.querySelector('.text').offsetWidth
  // 开始滚动  触发事件
  toScrollLeft()
}

Оценка окончания прокрутки основана на расстоянии от полосы прокрутки слева от элемента и длине текста.Если расстояние от полосы прокрутки слева от элемента равно длине текста, прокрутка заканчивается.

function toScrollLeft(){
  //  如果文字长度大于滚动条距离，则递归拖动
  if(textWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滚动结束 触发事件
  }
}

Во-вторых, реализация HTML

Рендеринг:

Часть кода:

  <marquee behavior="behavior" width="200" loop="2">1.文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</marquee>

Очень чистый код~,~

API бегущей строки

Хотя API тега marquee очень богат, тег описан на MDN следующим образом:

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Элемент устарел, пожалуйста, не используйте его больше. Хотя некоторые браузеры все еще поддерживают его, это не обязательно. Кроме того, использование этого элемента — одна из худших вещей, которые вы можете сделать своим пользователям, поэтому, пожалуйста, не делайте этого.

Поэтому, согласно принципу соблюдения стандартов документов в нашем ИТ-круге, мы должны стараться не использовать тег marquee в проекте.

Три, реализация CSS

визуализация

раздел кода

Предварительная демонстрация:CSS реализует выделение текста

резюме

CSS удовлетворяет требованию 1, позволяя определить, когда начинать прокрутку.

window.onload=function checkScrollLeft(){
  // 判断文字长度是否大于盒子长度
  if(textWidth > wrapWidth) {
    // 开始滚动  触发事件
    text.style.paddingRight = '300px'
    cont.style.left = "-870px"
  }
}

В то же время, пункт 2 требования также может быть выполнен, и можно судить об окончании прокрутки.

// 滚动结束
document.addEventListener("transitionend", function (){
    console.log("end")
}, false)

Эпилог

Ознакомьтесь с требованиями

Сравнение преимуществ и недостатков методов реализации

	js реализует эффект выделения	HTML реализует эффект выделения	CSS реализует эффект выделения
точка спроса 1	✔️	✘	✔️
точка спроса 2	✔️	✘	✔️
совместимость	✔️	✘	✘

Если вам нужно выполнить требования, можно реализовать как js, так и css. Однако, учитывая совместимость, CSS не поддерживается ниже ios9 и ниже Android 4.4, и другие хорошие решения находятся в стадии рассмотрения. Если у вас есть хорошее решение, пожалуйста, оставьте сообщение ниже, чтобы связаться со мной ~

Кроме того, css можно использовать как простой эффект отображения, например плавную прокрутку css ниже.

визуализация

раздел кода

Предварительная демонстрацияcss бесшовная анимация прокрутки

Поэтому само средство не является хорошим или плохим, когда какое средство использовать. Мы должны иметь ясный ум.

------------------------- Великолепная разделительная линия --------------------

обо мне

Моя домашняя страница github (нажмите, чтобы войти)
Мой официальный аккаунт (нажмите, чтобы войти)
Моя домашняя страница Nuggets (нажмите, чтобы войти)
Домашняя страница моей короткой книги (нажмите, чтобы войти)

Ссылаться на

последний стандарт w3c
HTML_make прокручиваемый тег subtitles_marquee