4

私はCS教員向けのWebサイトを作成するプロジェクトに取り組んでいます。ただし、1つの問題があります。ページ上の特定の要素を意味のある方法で強調表示する必要があります。ソリューションはクロスブラウザーである必要があります（つまり、IEで機能する必要があります）。

したがって、質問：

blink最新のブラウザ（Chromeを考えてください）でエミュレートする（IE6で完全に機能する）方法は？

更新：このjQueryプラグインが点滅を実行する ことを発見しましたが、jQueryを使用せず、最新のブラウザーにはCSS3フォールバックを使用することをお勧めします。

4

5 に答える 5

6

text-decorationその目的のためにCSSプロパティを使用できます：

例えば：

span {
    text-decoration: blink;
}

すべてを点滅させてspan nodes.. 点滅.. 点滅.. 点滅..

于 2012-07-09T11:03:13.257 に答える
4

エミュレートする 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を任意の要素に追加するだけです。

于 2012-07-09T11:48:00.990 に答える
2

クラスを作る必要はありません。従来のタグを使用して、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; }

JS 経由で追加されたストレート CSS

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>

于 2016-02-25T18:32:41.830 に答える
1

注意: リンクを「点滅」させたい場合は、非表示にするとクリックできなくなり、クリックしようとするゲームになるため、非表示にするのではなく、点滅したテキストの色を変更することをお勧めします。リンク ：-）

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';
        }
    }
}

// 「白」は私の背景の色です

于 2013-10-05T14:37:07.267 に答える