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 跨度消失时,您会看到我的文本移动。为什么?认为 relative 和 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 回答