javascript - JS 新贴纸问题

Question

我有一个网站想要一个电视片尾字幕式的自动收报机，我刚刚回去重新访问并检查它们，发现显示屏开始出现故障。我希望你们这些更有经验的 JS 老手能够帮助我找出我哪里出了问题。

我的JS如下:

$('.sidescroll').totemticker({
row_height  :   '120px',
next        :   '#ticker-next',
previous    :   '#ticker-previous',
stop        :   '#stop',
start       :   '#start',
mousestop   :   true 
});

jQuery(".sidescroll li").append("<hr />");

我的 CSS 如下:

.sidescroll {
    height: 100% !important;
    display: block;
}

.sidescroll li {
    margin: 10px;
    text-align: left;
    height: 120px;
}

.sidescroll hr {
     height: 3px; 
     border: 0; 
     box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}

.sidescroll li a {
    font-family: 'lulo' !important;
}

.sidescroll li a:hover {
    text-decoration: none;
    color: #5c4770;
}

代码是针对他们的博客文章的，类似于帖子的运行列表，由列表类别插件拉取，并且摘录限制为 20 个字符。我注意到的问题是水平行开始与几个帖子交互，而网站设置时情况并非如此。

Answer 1

事实证明这相当简单。有时盒子里的内容太多，它们会溢出到下面的盒子里。文本太多或自动换行分割为太多行。

奖金(完全可选)

我们可以优雅地抑制这种行为(假设使用 CSS3 生成渐变)。

首先我们修改 javascript 以插入水平线作为第一个子元素，然后插入一个带有类的 div 作为最后一个子元素:

jQuery(".sidescroll li").prepend('<hr />');
jQuery(".sidescroll li").append('<div class="fadeToWhite"></div>');

然后我们修改css:

.sidescroll {
    height: 100% !important;
    display: block;
}

.sidescroll li {
    margin: 10px;
    text-align: left;
    height: 120px;

    /* additions: */
    position: relative;
    overflow: hidden;
}

.sidescroll hr {
     height: 3px;
     border: 0;
     box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}

.sidescroll li a {
    font-family: 'lulo' !important;
}

.sidescroll li a:hover {
    text-decoration: none;
    color: #5c4770;
}

/* additions */
.sidescroll li div.fadeToWhite {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(transparent, white);
}

这将隐藏任何溢出的文本，同时将附加的 div 变成每个列表元素底部的淡入白色条，以避免硬文本剪切。