Question

我想制作一个自动收录器，当用户将鼠标悬停在其上时，它可以上下滚动，但我似乎找不到找到的方法，因此用户可以自由地上下滚动，以便他可以看到所有代码不同的是，现在，当用户将鼠标悬停在代码笔链接上时，他们只能看到可见的部分：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，并根据车轮变化量调整偏移量。

要使用jQuery设置事件监听器，您可以使用.on()函数：

import requests
from base64 import b64encode


appAuth = b64encode(b"QT8txxxxxxxx:n76mxxxxxxxxx").decode("ascii")
headers = { 'Authorization' : 'Basic %s' %  appAuth  }
url = "http://demo.skubana.com?grant_type=authorization_code&redirect_uri=demo.skubana.com/appstore&code=LCqYHU&cid=Y29tcGFueUlkMTI0MDYw"

r = requests.post(url, headers=headers,json={})

print(r.status_code)
print(r.content)

您应将其添加到$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()

如何制作互动式股票？

1 个答案: