Question

我正在开发一个使用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再次开始滚动，而当我们从弹出框中鼠标移动时，则应该开始滚动。

亲爱的专家，请指教..............？期待一种善意的回应。

此致

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);
                    });

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

P.S。对不起缩进

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

1 个答案: