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元素将相互跟随。

新闻Ticker MouseOver问题

1 个答案: