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