News Ticker MouseOver 问题

Question

我遇到了 JavaScript 问题。我正在尝试制作一个可以滚动但会在鼠标悬停时停止以供阅读的新闻小部件。目前发生在我身上的是它在第一次鼠标悬停时暂停。然后当 mouseleave 运行时，它会再次启动，但速度会加倍，并且不会在鼠标悬停时再次停止。我的 JS 知识很少，我在网上找不到我需要的东西。

var block_arr = $('.ticker p').map(function () { return $(this).get(0); }).toArray();

var ticker_item = $(block_arr[0]);
$(".ticker").html(ticker_item);
var ticker_width = $(".ticker").width();
var text_x = ticker_width;

console.log(block_arr.indexOf(ticker_item.get(0)));
console.log(block_arr.length);

scroll_ticker = function () {
    text_x--;
    ticker_item.css("left", text_x);
    if (text_x < -1 * ticker_item.width()) {
        ticker_item = $(block_arr[(block_arr.indexOf(ticker_item.get(0)) + 1 == block_arr.length) ? 0 : block_arr.indexOf(ticker_item.get(0)) + 1]);
        ticker_item.css("left", text_x);
        $(".ticker").html(ticker_item);
        text_x = ticker_width;
    }
}
var scrollTicker = setInterval(scroll_ticker, 10);

$('.ticker').mouseover(function () {
    clearInterval(scrollTicker);
}).mouseleave(function () {
    setInterval(scroll_ticker, 10);
});

然后我也遇到了 foreach 循环的问题。我需要多个新闻项目相互关注，但是 div 相互堆叠，最上面的一个不滚动。有没有办法隐藏顶部 div 或我应该使用的不同循环？

 @foreach (var i in Model) 
        { 
                <div class="ticker" style="width:100%;overflow:hidden; margin-bottom:0px; position:relative">

                    @if (Html.Sitecore().Field("ContentURL", i) != null && i.Item.Fields["ContentURL"].HasValue)
                    {
                        Sitecore.Data.Fields.LinkField linkField = i.Item.Fields["ContentURL"];
                        var link = linkField.GetFriendlyUrl();

                            <p style="font-size:medium"><a href="@link" style="border: none;" target="_blank"><strong>@Html.Sitecore().Field("ContentTitle", i)</strong> - @Html.Sitecore().Field("ContentDescription", i)</a></p>                  
                    }

                //else, go to the Item
                    else

                    {     
                            <p style="font-size:medium"><a href="@i.Url" style="border: none;"><strong>@Html.Sitecore().Field("ContentTitle", i)</strong> - @Html.Sitecore().Field("ContentDescription", i)</a></p>           
                    }


                </div>
        }

Answer 1

对于 JavaScript 问题，您只需要在 mouseleave 上重新分配 scrollTicker 变量，因为您只是创建了另一个区间，但该变量仍保留旧区间的 id。所以这个

$('.ticker').mouseover(function () {
    clearInterval(scrollTicker);
}).mouseleave(function () {
    setInterval(scroll_ticker, 10);
});

变成这样

$('.ticker').mouseover(function () {
    clearInterval(scrollTicker);
}).mouseleave(function () {
    scrollTicker = setInterval(scroll_ticker, 10);
});

对于C#问题，需要在每个div样式中添加float: left;。然后 div 元素会互相跟随。