Question

我自己写了一个名为marquee的jquery插件（我认为没有必要解释它的作用）

这个插件必须做一件我能部分完成的事情。在动画期间，当它位于容器的中间三分之一时突出显示一个单词。

我的动画像这样完成

var reset = function() {
    $(this).css("margin-left", "0%");
    $(this).animate({ "margin-left": (-w-30)+"px" },{
        duration:s.interval,
        easing:'linear',
        done:reset, // don't forget to uncomment
        step:_highlight
    });
};
reset.call(e.find(".text-banner-wrapper"));

_highlight函数编写如下

_highlight = function(e,f){
    var f = $(f.elem).closest('.text-carousel');
    var w = f.width();
    f.find('.item').each(function(){
        var o = $(this).offset().left-f.offset().left;
        if(o<((2*w)/3) && o>w/3){
            if(!$(this).prev().is(".active")){
                $(this)
                       .css('color',f.data("highlightcolor"))
                       .addClass("active");
            }           
        }
        else
            $(this).removeClass("active").removeAttr("style");
    });
}

您可以看到我的方法，但它无法按预期工作。我可以添加和删除样式和类，但如果单词很短，则会突出显示更多内容。有人可以帮我吗？

谢谢！

修改这是一个fiddle，其输出窗口必须非常大，以便从一开始就能正常工作。

Answer 1

我建议检查是否已有活动项目，如果是，则不要突出显示新项目。

if(!$('.item.active').length) {
    $(this).css('color',f.data("highlightcolor")).addClass("active");   
}

因此，您的突出显示功能如下所示：

_highlight = function(e,f){
    var f = $(f.elem).closest('.text-carousel');
    var w = f.width();
    f.find('.item').each(function(){
        var o = $(this).offset().left-f.offset().left;
        if(o<((2*w)/3) && o>w/3){
            if(!$('.item.active').length) {
                $(this).css('color',f.data("highlightcolor")).addClass("active");   
            }
        }
        else
            $(this).removeClass("active").removeAttr("style");
    });
}

在动画期间仅突出显示set中的一个元素

1 个答案: