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

【问题标题】：jquery.li-scroller.1.0.js newsticker modificationjquery.li-scroller.1.0.js newsticker修改
【发布时间】：2012-01-21 19:14:03
【问题描述】：

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

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

当我们将鼠标悬停在新贴纸上时，strip 会停止。在这个阶段，我想在当前 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 应该启动。

尊敬的专家，请指教........？期待善意的回应。

问候

【问题讨论】：

标签： javascript jquery popup document

【解决方案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);
                    });

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

附：对不起，缩进

【讨论】：