我刚刚写了一个非常简单的 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:
当最后一个 .highlight 跨度消失时,您会看到我的文本移动。为什么?认为 relative 和 z-index: -1 会解决这个问题吗?
我应该改用绝对位置并计算定位吗?