0

私はちょうど本当に単純な jQuery プラグインを書いた..ちょっと、助けが欲しい.

(function($){
    $.fn.highlight = function(words){
        return this.each(function(){
            //Get text from within
            var text = $(this).html();
            //Replace with new text
            $(this).html(text.replace(words,"<i class='highlight'></i><span class='word'>"+"$1"+"</span>"));
            //Get the all the highlight classes within this
            var highlights = $(this).find(".highlight");
            //Go through all
            return highlights.each(function(){
                var $this = $(this);
                //Get to the next word
                var wordDiv = $this.nextAll(".word").eq(0);
                //Set highlight span same height as word
                $this.height(wordDiv.height()+2);
                //Set highlight span same width +4 then positioning
                var newWidth = wordDiv.width()+4;
                wordDiv.replaceWith(function(){
                   return $(this).contents();
                });
                $this.width(newWidth+2).css({
                    left:(newWidth)+"px",
                    marginLeft: "-"+(newWidth)+"px"
                });
                $this.delay(Math.ceil(Math.random()*30)*200+2000).fadeOut("4000",function(){
                  $this.remove();
             });
        });         
        });
    }
})(jQuery);
$(document).ready(function(){
    $("div").highlight(/(simple|wrote|knowledge)/g);
});​

そしてCSS：

.highlight{
    background: #FBB829;
    display: inline-block;
    position: relative;
    z-index: -1;
    top: 5px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}​

そのCSSをjQueryプラグインに入れる方が良い方法ですか? ここにjsFiddleがあります：

http://jsfiddle.net/aVCtA/11/

最後の .highlight スパンが消えると、テキストが移動します。なぜですか？相対と z-index: -1 で修正できますか?

代わりに絶対位置を使用して位置を計算する必要がありますか?

4

3 に答える 3

1

最も簡単な解決策は、フェードアウト後にハイライト要素を削除しないことです。これは、フェードをアニメーションの不透明度に変更することで実現できます。

$this.delay(Math.ceil(Math.random()*30)*200+2000).animate({opacity: 0},4000);

これは最も美しい解決策ではありませんが、目的のためには問題ないと思います。

于 2012-12-12T06:41:44.370 に答える
1

コードにいくつかの変更を加えました。jsfiddle でテストを確認してください

変更ログ:

jQuery :

.css()次の行から を削除しました。

$this.width(newWidth + 2);

CSS :

スタイリングを次のように変更しました。

.highlight{
    background: #FBB829;
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: 0px;
    margin-left: -2px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
于 2012-12-12T06:43:02.850 に答える
0

別の解決策は次のとおりです。

http://jsfiddle.net/aVCtA/20/

削除された CSS:

top:5px

JS の変更:

高さ設定の行を削除他の文字の高さを設定する空白スペースを追加しました。非表示で移動しないように、余分な幅を削除します。

于 2012-12-12T07:39:00.727 に答える