javascript - 我怎样才能制作一个互动的自动收报机？

Question

我想做一个自动收报机，当用户悬停在它上面时它会停止，他可以上下滚动，但我似乎找不到制作它的方法，所以用户可以自由地上下滚动，这样他就可以看到所有与现在不同的是，现在用户只能看到当他将鼠标悬停在 codepen 链接上时可见的部分:https://codepen.io/amin-rather/pen/ejJgZO

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
        travelocity: 0.03
    }, settings);
    return this.each(function() {
        var $strip = jQuery(this);
        $strip.addClass("newsticker")
        var stripHeight = 1;
        $strip.find("li").each(function(i) {
            stripHeight += jQuery(this, i).outerHeight(true); // thanks to Michael Haszprunar and Fabien Volpi
        });
        var $mask = $strip.wrap("<div class='mask'></div>");
        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
        var containerHeight = $strip.parent().parent().height(); //a.k.a. 'mask' width  
        $strip.height(stripHeight);
        var totalTravel = stripHeight;
        var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
        function scrollnews(spazio, tempo) {
            $strip.animate({
                top: '-=' + spazio
            }, tempo, "linear", function() {
                $strip.css("top", containerHeight);
                scrollnews(totalTravel, defTiming);
            });
        }
        scrollnews(totalTravel, defTiming);
        $strip.hover(function() {
                jQuery(this).stop();
            },
            function() {
                var offset = jQuery(this).offset();
                var residualSpace = offset.top + stripHeight;
                var residualTime = residualSpace / settings.travelocity;
                scrollnews(residualSpace, residualTime);
            });
    });
};

$(function() {
    $("ul#ticker01").liScroll();
});

.holder {
    background - color: #bbdccb;
    width: 300 px;
    height: 250 px;
    overflow: hidden;
    padding: 10 px;
    font - family: Helvetica;
}

.holder.mask {
    position: relative;
    left: 0 px;
    top: 10 px;
    width: 300 px;
    height: 240 px;
    overflow: hidden;
}

.holder ul {
    list - style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.holder ul li {
    padding: 10 px 0 px;
}

.holder ul li a {
    color: darkred;
    text - decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="holder">
          <ul id="ticker01">
                      <li><span>20/10/2018</span><a href="#"> T2 Exam of classes pre Nursery to 4th to start from 2/10/2018</a></li>
                      <li><span>15/07/2018</span><a href="#"> Student for INSPIRE AWARD to be nominated on 16th july</a></li>
                     <li><span>14/07/2018</span><a href="#"> School offers free admission for all classes</a></li>
                      <li><span>14/07/2018</span><a href="#"> Summer vacation to start from 19th july 2018</a></li>
                      <li><span>14/07/2018</span><a href="#"> Syllabus copies distributed among students</a></li>
                  <li><span>14/07/2018</span><a href="#"> Result of all classes will be announced after confirmation from higher authorities</a></li>
            <li><span>14/07/2018</span><a href="#"> Normal class work resumed after T1 exam</a></li>
            <li><span>14/07/2018</span><a href="#"> Uniform distributed among students</a></li>
                </ul>
        </div>

Answer 1

您可以收听 wheel event在 strip 上并根据车轮增量调整偏移量。

要使用 jQuery 设置事件监听器，您可以使用 .on()功能:

$strip.on('wheel', function (e) {        // Attach listener to the wheel event on the $strip.
  e.preventDefault();                    // Disable default browser scrolling, when the user scroll over the $strip.
  var offset = jQuery(this).offset();    // Get current offset of the $strip.

  var delta = e.originalEvent.deltaY;    // Get amount of the scroll.
  // We can't use deltaY directly, as it's amount is not consistent between browsers, so:
  var direction = Math.sign(delta);      // Get direction of the scroll.
  var sensitivity = 5;                   // You should adjust sensitivity for your needs.
  offset.top += direction * sensitivity; // Calculate new top offset.

  jQuery(this).offset(offset);           // Set new offset to the $strip.
});

你应该在.each()回调结束之前添加它，所以完整的代码是:

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
        travelocity: 0.03
    }, settings);
    return this.each(function() {
        var $strip = jQuery(this);
        $strip.addClass("newsticker")
        var stripHeight = 1;
        $strip.find("li").each(function(i) {
            stripHeight += jQuery(this, i).outerHeight(true); // thanks to Michael Haszprunar and Fabien Volpi
        });
        var $mask = $strip.wrap("<div class='mask'></div>");
        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
        var containerHeight = $strip.parent().parent().height(); //a.k.a. 'mask' width  
        $strip.height(stripHeight);
        var totalTravel = stripHeight;
        var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
        function scrollnews(spazio, tempo) {
            $strip.animate({
                top: '-=' + spazio
            }, tempo, "linear", function() {
                $strip.css("top", containerHeight);
                scrollnews(totalTravel, defTiming);
            });
        }
        scrollnews(totalTravel, defTiming);
        $strip.hover(function() {
                jQuery(this).stop();
            },
            function() {
                var offset = jQuery(this).offset();
                var residualSpace = offset.top + stripHeight;
                var residualTime = residualSpace / settings.travelocity;
                scrollnews(residualSpace, residualTime);
            });
        $strip.on('wheel', function (e) {
            e.preventDefault();
            var offset = jQuery(this).offset();
            var delta = e.originalEvent.deltaY;
            var direction = Math.sign(delta);
            var sensitivity = 5;
            offset.top += direction * sensitivity;
            jQuery(this).offset(offset);
        });
    });
};

$(function() {
    $("ul#ticker01").liScroll();
});