7

約10〜15行のテキストを持つp要素またはdiv要素があるとします。クライアントはこれに奇妙な呼び出しを行い、テキストの色が異なる奇数/偶数行が必要です。ライン 1 を黒と言うと、ライン 2 はグレー、ライン 3 は再び黒、というように...

だから私はスパンを使用することに決め、色を変更しましたが、可変解像度はここで物事を殺してい:first-lineます:odd. :evenCSSを使用してこれを達成する方法はありますか、それともjQueryを使用する必要がありますか?

TL; DR : 段落または div の奇数/偶数行をターゲットにしたい

CSS ソリューションが必要です。そうでない場合は、jQuery と JavaScript を歓迎します

4

3 に答える 3

11

デモ1

http://jsfiddle.net/Fptq2/2/
最新のすべてのブラウザで動作するはずです。

本質的にそれ：

  1. ソースを個々の単語に一度分割します
  2. 各単語をスパンで囲みます (醜いですが効果的です -任意のスタイルをスパンに適用できるようになりました)
  3. 単純な位置計算を使用して、要素が前の要素よりも低いかどうかを判断します
  4. インデックスの変更に基づいて色を変更します
  5. サイズ変更時に #3 ～ 5 を実行します (これは確実に調整する必要があります!)
$(".stripe").each(function(){
  var obj = $(this);
  var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
  obj.html(html);
});

function highlight(){
    var offset = 0;
    var colorIndex = 0;
    var colors = ["#eee","#000"];
    var spans = $(".stripe span");

    // note the direct DOM usage here (no jQuery) for performance
    for(var i = 0; i < spans.length; i++){
        var newOffset = spans[i].offsetTop;  

        if(newOffset !== offset){
            colorIndex = colorIndex === 0 ? 1 : 0;
            offset = newOffset;
       }

       spans[i].style.color = colors[colorIndex];
    }
}

highlight();
$(window).on("resize", highlight);

デモ 2

フィドル: http://jsfiddle.net/Fptq2/4/

  • より大きなテキスト ブロックを使用する
  • 複数の要素に適用された効果を表示
  • 「すべてのスパン」セレクターをキャッシュします
  • サイズ変更スロットリングを追加
(function () {
    $(".stripe").each(function () {
        var obj = $(this);
        var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
        obj.html(html);
    });

    var offset = 0;
    var colorIndex = 0;
    var colors = ["#ccc", "#000"];
    var spans = $(".stripe span");

    function highlight() {
        for (var i = 0; i < spans.length; i++) {

            var newOffset = spans[i].offsetTop;
            if (newOffset !== offset) {
                colorIndex = colorIndex === 0 ? 1 : 0;
                offset = newOffset;
            }

            spans[i].style.color = colors[colorIndex];
        }
    }

    highlight(); // initial highlighting

    var timeout;
    function throttle(){
        window.clearTimeout(timeout);
        timeout = window.setTimeout(highlight, 100);
    }

    $(window).on("resize", throttle);
})();

出力

ここに画像の説明を入力

于 2013-04-05T10:24:16.390 に答える
4

ここに考えられる解決策の 1 つがあります。テキストの背後に配置される多数の<div>要素を生成します。<div>要素は親コンテナーからフォント サイズを継承するため、マークアップが破損することはありません。

HTML:

<div id="test">Lorem ipsum ...</div>

JavaScript:

var div = document.getElementById("test"),
    layer = document.createElement("div"),
    text = div.innerHTML,
    lineHeight;

layer.appendChild(document.createTextNode("\u00A0"));
div.insertBefore(layer, div.firstChild);

lineHeight = layer.offsetHeight;
div.style.position = "relative";
div.style.overflow = "hidden";
div.style.color = "transparent";
layer.style.position = "absolute";
layer.style.zIndex = "-1";

window.addEventListener("resize", (function highlight() {
    while (layer.firstChild)
        layer.removeChild(layer.firstChild);

    for (var i = 0, n = Math.ceil(div.offsetHeight / lineHeight); i < n; i++) {
        var line = document.createElement("div"),
            block = document.createElement("div");

        line.style.height = lineHeight + "px";
        line.style.color = i % 2 ? "#ccc" : "#aaa";
        line.style.overflow = "hidden";

        block.innerHTML = text;
        block.style.marginTop = -i * lineHeight + "px";

        line.appendChild(block);
        layer.appendChild(line);
    }
    return highlight;
})(), false);

デモ: http://jsfiddle.net/M3pdy/2/

于 2013-04-05T09:53:36.717 に答える
1

この質問に答えるには遅すぎます..しかし、この回答が、ラップされたテキストの段落を別々の行に分割したい他の人に役立つ場合は、ラップされたテキストを行に変換することを非常に嬉しく思い
ます(行番号付けまたは各行を個別に分割するため)要素) は掲示板にかなり出てくる質問であり、最終的にそうする必要があったので、ここにあります (MooTools と jQuery の両方について – jQuery バージョンはテストされていないため、問題がある場合はそのままにしてくださいコメント）。この特定の化身は、ラップされた各行を個別の新しい要素に分割しますが、行を数えるだけに簡単に変更できます。
コードを使用すると、これを実現できます $("#someElement").linify()
。次の URL は、この
jquery-mootoolsの概念実証です。

これは、ラップされたテキスト行を個々の div 項目に示すクイック フィドルです。
http://jsfiddle.net/UANeP/

于 2014-05-10T16:58:46.633 に答える