javascript - jquery.li-scroller.1.0.js newsticker修改

我正在开发一个使用jquery.li-scroller.1.0.js在滚动条中具有滚动newsticker的网站。

页面地址是：http://www.designforce.us/demo/ticker/index.html

当我们将鼠标悬停在newsticker上时，条带停止。在此阶段，我想在当前li下方显示一个弹出框及其文本。我已完成的操作，当我们将鼠标指针悬停在条形图上时，newsticker停止，并且框及其文本显示出来。

问题：
jquery.li-scroller newsticker有一个带有{overflow：hidden}的包装器，因此，如果我添加带有li的弹出框，则它不会显示。这就是为什么我用一个单独的空格对弹出窗口（.tickPop）进行编码，并为白色jquery文档准备好脚本的原因。我的脚本是：

$('ul#ticker01 li').each(function(e){
    var iClass;
    $(this).hover(function(){
        iClass = $(this).attr('class');
        $(this).css('height',$('tickPop').height()+30)
        var offset = $(this).offset();
        var left = offset.left;
        var top = offset.top+20;
        var iWidth = $(this).width();
        var sText = $(this).children().html();
        $(this).css('background','#f6f4f4');
        $('.tickPop').css('left',left);
        $('.tickPop').css('top',top);
        $('.tickPop').css('width',iWidth);
        $('.tickPop').css('display','block');
        $('.tickPop').text(sText);
     }, function(){

        $('.tickPop').mouseleave(function(){
            bHovering = false;
            $(this).css('display','none');
        });

         $(this).css('background','transparent');
         //$('.tickPop').css('display','none');
         if(iClass == 'Yellow')
            $(this).css('background','url(images/icon-yellow.jpg) left center no-repeat');
        else
            $(this).css('background','url(images/icon-white.jpg) left center no-repeat');

    });

});

默认情况下，名为$（'。tickPop'）的弹出框是隐藏的，并且当用户将鼠标悬停在newsticker上时，jQuery函数将设置属性$（'。tickPop'）。css（'display'，'block'）并可见。

现在的问题是，当我们将鼠标指针移到弹出框上时，newsticker再次开始滚动，而我希望当我们从弹出框鼠标离开时，newsticker应该开始。

尊敬的专家，请指教..............？
期待有一个友好的回应。

问候

最佳答案

您应该修改jquery li-scroller源。

观看以下代码（来自li-scroller来源）：

function scrollnews(spazio, tempo){
                $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
                }
                scrollnews(totalTravel, defTiming);

                                // $strip = $(this) so it triggers when you're hover a news
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace, residualTime);
                });

您应该添加类似以下内容：

     var popup = jQuery('.tickPop');
     popup.hover(function(){
                    $strip.stop();
                           },
                           function(){
                            var offset = jQuery(this).offset();
                            var residualSpace = offset.left + stripWidth;
                            var residualTime = residualSpace/settings.travelocity;
                            scrollnews(residualSpace, residualTime);
                    });

我没有测试该代码，但应该可以工作。

附言抱歉缩进

关于javascript - jquery.li-scroller.1.0.js newsticker修改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8955892/