‹мигать› в современных браузерах?

Я работаю над проектом по созданию веб-сайта для нашего факультета CS. Но есть одна проблема. Мы хотим, чтобы определенные элементы на странице выделялись значимым образом. Решение должно быть кроссбраузерным (т.е. должно работать в IE).

Итак, вопрос:

Как эмулировать blink (отлично работает в IE6) в современных браузерах (например, Chrome)?

Обновление: я нашел этот подключаемый модуль jQuery для мигания, но мы этого не делаем. используйте jQuery и предпочли бы запасной вариант CSS3 для современных браузеров.


javascript html css blink
person katspaugh    schedule 09.07.2012    source источник
comment
Blink работает в Chrome 20. Почему вы хотите его использовать? Это не добавляет никакой ценности, и это выглядит очень раздражающим.   -  person Rob W    schedule 09.07.2012
comment
Вы тролите, или кто-то из вашего факультета действительно думает, что blink будет осмысленным способом выделения элементов?   -  person BoltClock    schedule 09.07.2012
comment
@RobW, это в руководстве по стилю нашего университета. Не работает в Safari (пробовал [].forEach.call(document.querySelectorAll('h1'), function (item) { item.innerHTML = item.textContent.blink(); });).   -  person katspaugh    schedule 09.07.2012
comment
См. также Что такое замена для мигающий текст на веб-странице?.   -  person lhf    schedule 09.07.2012
comment
@BoltClock, не троллю. Просто пытаюсь изящно деградировать.   -  person katspaugh    schedule 09.07.2012

Ответы (5)


arrow_upward
2
arrow_downward

Вам не нужно делать класс. Используйте традиционный тег и просто добавьте для него CSS.

Через прямой CSS:

/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }

Прямой CSS, добавленный через JS

if ("[object HTMLUnknownElement]" === Object.prototype.toString.call(document.createElement('blink'))) {
    var head = document.head || document.getElementsByTagName("head")[0],
        style = document.createElement("style");
    /* Standard (Mozilla) */
    style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    /* Chrome & Safari */
    style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    style.appendChild(document.createTextNode("blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }"));
    head.appendChild(style);
}


/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }
<p><blink>I Blink</blink></p>
<hr />
<p><noblink>I don't</noblink></p>

person SpYk3HH    schedule 25.02.2016

arrow_upward
9
arrow_downward

Интересно, почему никто не предложил CSS3 Animations:

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.blink {
  animation: blink 600ms infinite;
}

Демонстрация JSBin.

person katspaugh    schedule 05.10.2013

arrow_upward
7
arrow_downward

Вы можете просто использовать свойство CSS text-decoration для этой цели:

Например:

span {
    text-decoration: blink;
}

Пусть все span nodes мигают.. мигают.. мигают.. мигают..

person jAndy    schedule 09.07.2012
comment
Это не работает в IE/Chrome/Safari. Работает только в Firefox/Opera. См. developer.mozilla.org/en/CSS/text-decoration#Values - person uınbɐɥs; 09.07.2012
comment
@ShaquinTrifonoff, спасибо. Это разочаровывает. Может быть, кто-то должен предоставить универсальное решение. - person katspaugh; 09.07.2012
comment
@ShaquinTrifonoff: ты прав. Однако комбинация <blink> и css class должна охватывать некоторые браузеры. Интересно, что хром и сафари на самом деле предлагают вариант blink для оформления текста, но просто игнорируют его. - person jAndy; 09.07.2012
comment
text-decoration: blink является частью стандарта (и никуда не исчезнет); браузерам просто дается разрешение не мигать текстом по очевидным причинам. - person BoltClock; 09.07.2012
comment
В настоящее время это отключено во всех основных браузерах: Firefox 23, Opera 15 удалили его, и оно недоступно в Safari и Chrome согласно developer.mozilla.org/en-US/docs/Web/CSS/text-decoration. - person Dereckson; 29.03.2015
comment
@Dereckson Нет причин отрицать этот ответ. Ему почти 3 года, на момент написания это было правильно и верно. - person jAndy; 29.03.2015
comment
Вопрос все еще доступен, и в 2015 году этот ответ больше не интересен, и вместо этого мы должны продвигать другой ответ, например, анимацию CSS3. Может быть, вы могли бы отредактировать свой ответ, чтобы отметить историческое состояние предоставленной информации? - person Dereckson; 29.03.2015

arrow_upward
4
arrow_downward

Вот пример JavaScript для эмуляции <blink>:

var blink = (function () {
  var elems;

  function blink() {
    for (var i = 0; i < elems.length; i++) {
      var visible = elems[i].style.visibility === 'visible';
      elems[i].style.visibility = visible ? 'hidden' : 'visible';
    }
  }

  this.start = function () {
    elems = document.getElementsByClassName('blink');
    setInterval(blink, 500);
  };

  return { start: start };
}());

addEventListener('load', blink.start);

демонстрация CodePen

Просто добавьте класс blink к любому элементу.

person uınbɐɥs    schedule 09.07.2012
comment
@pbwned Веб-сайт больше не активен, поэтому домен перешел к Dot TK. Вы можете увидеть, какой была ссылка раньше, в Интернет-архив - person uınbɐɥs; 04.06.2015

arrow_upward
1
arrow_downward

просто замечание: если вы хотите «мигать» ссылкой, лучше изменить цвет мигающего текста, а не скрывать его, потому что, когда он скрыт, вы не можете щелкнуть по нему, и поэтому попытка щелкнуть по нему превратилась в игру. связь :-)

function toggleBlink() {
    for(var i = 0; i < blinkers.length; i++) {
        if(blinkers[i].style.color == 'red') {
            blinkers[i].style.color = 'white';
        } else {
            blinkers[i].style.color = 'red';
        }
    }
}

// "белый" - это цвет моего фона

person Raidge    schedule 05.10.2013
comment
Хороший улов! Невидимые ссылки действительно не могут быть нажаты. - person katspaugh; 06.10.2013