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

Question

我正在开发一个网站，该网站使用 jquery.li-scroller.1.0.js 在 strip 中包含一个滚动的 newsticker。

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

当我们将鼠标悬停在新贴纸上时，剥离就会停止。在这个阶段，我想在当前 li 的正下方显示一个弹出框及其文本。我已经做了一些事情，当我们将鼠标指针悬停在 strip 上时，新贴纸会停止，并且会显示带有文本的框。

问题: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 应该启动。

各位专家，请指教............？期待您的友好回复。

问候

Answer 1

您应该修改 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);
                    });

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

附注抱歉缩进了