Question

我正在开发一个股票代码（慢慢但肯定，因为我正在学习javascript）

它似乎运作良好，我现在正在尝试设置自动收报机的样式，以便它有一个“显示更多”按钮。 “显示更多”文本需要位于选取框之外，单击时它将展开显示完整列表的选取框（或许多px）。单击后，文本将更改为显示更少，这会将选取框缩小回默认大小。

我已尝试从网上获取一些不同的javascript脚本，但无济于事。我不确定选框标签是否会导致问题。

我可以在这里找到我想要实现的类似示例： http://jsfiddle.net/8u2jF/

但我无法使用marquee或我现有的JS

我现在需要将其纳入其中的项目也可以在这里找到：

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI","NYSE:TEX" ,"NYSE:CAT", "NASDAQ:HEES",  "VIE:PAL" ];
$(document).ready(function () {
       for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[i]+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            var divContainer =  $('*[data-symbol="' + stockInfo1.t +'"]');

            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;             
            var stockChange ="";
            stockString1  += '<span class="stockSymbol "> '  +  stockInfo1.t + ' </span>';
            stockChange += '<span class="stockPrice "> '  +  stockInfo1.l  + '</span>';
            stockChange += '<span class="stockChange "> '  +  stockInfo1.c + '</span>';
            stockString1 += stockChange + '</div>';
            $("#title").append("<div>" + divContainer.data('title') + "</div>");
            $("#symbols").append("<div><b>" + stockInfo1.t + "</b></div>");

            $("#liveData").append("<div>" + stockChange + "</div>");
            divContainer.append(stockString1);

        });
    }
});

此致萨姆

Answer 1

问题在于选框。我试图增加选框的高度，它的作用是 - 它会重置动画，从而导致不必要的效果。

相反，我使用CSS3动画编写了一些快速代码并复制了您需要的内容。这是一个小提琴： http://jsfiddle.net/arun88m/9og8qnkL/

HTML代码：

<div class="container">
    <p class="marquee">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero nulla, venenatis in suscipit vitae, euismod non mauris. Quisque sagittis nulla neque, at blandit leo porttitor nec. Praesent quis dolor venenatis, pellentesque eros volutpat, suscipit mi. Sed luctus diam est, vel egestas felis lacinia quis. Curabitur vel mattis urna. In convallis ex mauris, in condimentum purus porta vel. Cras id molestie odio. Proin rutrum, tortor eget varius ultricies, odio enim congue purus, nec porta massa nunc at diam. Cras efficitur ipsum a ligula ornare, vel eleifend nulla iaculis. In hac habitasse platea dictumst. Donec tempor quam nec aliquet gravida. Proin porttitor convallis ipsum vitae aliquam. Nunc mollis, dui nec dignissim accumsan, erat erat dictum magna, non tristique felis massa non nibh. Aenean ullamcorper eget velit eget auctor.

Donec pharetra ante sit amet accumsan molestie. Mauris mollis hendrerit augue, non vestibulum eros. Aliquam vitae quam faucibus, dapibus nisi ac, vulputate sapien. Fusce bibendum, purus eget sodales blandit, lectus est bibendum diam, sit amet dapibus purus justo nec risus. Fusce dignissim nulla sed risus efficitur, sed porta nulla efficitur. Aenean rhoncus, velit eu porta ornare, massa tellus dapibus diam, quis sagittis tellus justo sed purus. Fusce eu bibendum dui. Praesent sit amet arcu ac risus efficitur maximus et id tellus. Cras vitae volutpat augue, id sollicitudin magna. Sed scelerisque dictum sem vitae maximus. Vestibulum tempus iaculis mauris, quis dapibus lorem fermentum in. Nullam vitae congue neque. Praesent condimentum hendrerit placerat. Suspendisse mattis eu leo eget efficitur. Suspendisse tortor odio, ornare sit amet varius vel, gravida sed dui. Quisque ultrices, dui ac aliquam pretium, orci sem tempor arcu, vitae maximus elit ipsum porttitor sem</p>
</div>
<a href="#" class="toggle" data-action="more">Show More</a>

Javascript代码：

$(".toggle").on("click", function () {
    $(".container").toggleClass("more");

    if($(this).attr('data-action') == 'more')    {
        $(this).html('Show Less');
        $(this).attr('data-action', 'less');


    } else {
        $(this).html('Show More');
        $(this).attr('data-action', 'more');
    }
});

CSS：

.container {
    width: 18em;
    height: 2em;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

.more {
    height: 8em;
}

@keyframes marquee {
    0%   { top:   2em }
    100% { top: -11em }
}

CSS代码中要注意的关键事项是动画相关代码和@keyframes，它们定义文本的开始和结束位置。

显示更多javascript，扩展字幕

1 个答案: