试图做一个大帐篷

时间:2017-10-28 14:30:24

标签: javascript animation marquee

我目前正在生成将它们放入容器的元素,我希望该容器从字幕标记的右侧移动到左侧。

HTML:

    <div class="news_wrapper">
        <div class="news_start"></div>
        <div class="news_end"></div>
        <div id="marquee" class="news_text">
            <!--<p>Consider a small donation btc: 114t1q7Fro4JCANagYMF55BynAGhvsk39z</p>-->
        </div>
    </div>

JavaScript的:

function createElement(type, attributes, someElement) {
    var element = document.createElement(type);
    for (var key in attributes) {
        if (key === "class") {
            var cls = attributes[key];
            for (var c in cls)
                element.classList.add(cls[c]);
        } else {
            element[key] = attributes[key];
        }
    }
    someElement.appendChild(element);
}

        window.addEventListener('load', function () {
            var news_marquee = document.getElementById("marquee"),
                    news_marquee_width,
                    news_volatility,
                    news_class,
                    news_name,
                    news_track,
                    news_track_width,
                    lcal_coinsss,
                    find_volatility;

            add_news();

            function move_news() {
                news_track_width = news_track_width + 1;
                console.log(news_track_width);
                news_track.style.right = "-" + news_track_width + "px";
                setInterval(move_news, 1000);
            }

            function add_news() {
                lcal_coinsss = JSON.parse(localStorage.getItem('coinss'));
                find_volatility = findVolatility(lcal_coinsss);

                var newElement = createElement("div", {
                    "id": "news_track",
                    "class": ["news_track"]
                }, news_marquee);
                news_track = document.getElementById("news_track");

                for (var i in find_volatility) {
                    news_volatility = find_volatility[i][1];
                    if (news_volatility >= 1) {
                        news_class = "positive_number_text";
                    } else if (news_volatility <= -1) {
                        news_class = "negative_number_text";
                    }

                    var newElement = createElement("p", {
                        "id": "news_name" + find_volatility[i][0],
                        "class": ["news_name"]
                    }, news_track);
                    news_name = document.getElementById("news_name" + find_volatility[i][0]);
                    news_name.textContent = find_volatility[i][0];

                    var newElement = createElement("span", {
                        "id": "news_volatility" + find_volatility[i][0],
                        "class": [news_class]
                    }, news_track);
                    news_volatility = document.getElementById("news_volatility" + find_volatility[i][0]);
                    news_volatility.textContent = find_volatility[i][1];
                }
                news_marquee_width = news_marquee.offsetWidth;
                news_track_width = news_track.offsetWidth;
                news_track.style.right = "-" + news_track_width + "px";
                move_news();
//                    console.log(news_marquee_width);
//                    console.log(news_track_width);
                }

我正在生成元素,并且它们位于选取框内的包装中,但是我无法按照我的意愿移动它,当我运行move_news时,它将添加正确的CSS expotentional。

基本上我希望生成的div内容以字幕样式移动。 如果有人对整个脚本有任何建议,请告诉我。

0 个答案:

没有答案