新闻编号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＃问题，您需要添加float: left; 每种div样式。 然后div元素将彼此跟随。