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 循环的问题。我需要多个新闻项相互跟随，但是 divs 堆叠在彼此的顶部并且顶部的不会滚动。有没有办法隐藏顶部 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 个元素将相互跟随。

News Ticker MouseOver 问题

News Ticker MouseOver Issue

javascript

c#

razor

foreach

mouseover