使用 Javascript 和 CSS 动画创建 TEXT 选框答案

【问题标题】：Using Javascript & CSS Animations to create a TEXT marquee使用 Javascript 和 CSS 动画创建 TEXT 选框
【发布时间】：2014-02-19 20:40:40
【问题描述】：

我正在捕食有人可以帮助我..

简史：

我正在互联网上建立一个广播电台，网页将显示正在播放的歌曲和过去播放的歌曲的元数据...

到目前为止，我已经成功构建了一个 MYSQL 数据库，在 PHP 中查询数据库，在 JSON 中编码数据数组，使用 ajax 设置计时器来查询数据库和 JavaScript 将数据解析为 HTML...

我也设法在一定程度上了解了 HTML 和 CSS。

我是编码新手，一切进展顺利，并且正在学习一些 JavaScript 课程，但我想要的东西对于我迄今为止所学的任何课程来说都太高级了......

问题：

我希望制作一个 TEXT 选框来显示当前正在播放的歌曲的名称。文字选框会有一些规则。

规则 1：如果歌曲名称等于或小于显示区域，则歌曲名称将在屏幕上保持静态。

规则2：如果歌曲名称大于显示区域，则需要动画。

在您继续之前，我需要注意我已经查看了一些 JQuery 选框，但没有一个适合我的需要

数学：

FIXED DIV WIDTH = 257.4 像素

（这是包含可变文本的“包装器”（它比我的 MAXIMUM TEXT WIDTH 大一点，所以看起来很漂亮......）

可变文本宽度 = x 个字符

（由“list0title”定义，它是来自 MYSQL dB 的可变数据）（字符需要转换为像素以用于 MAXIMUM TEXT WIDTH）

最大文本宽度 = 250 像素

（这是舒适地适合“包装”的最大文本，如果 VARIABLE TEXT WIDTH 等于或小于 MAXIMUM TEXT WIDTH 文本将是静态的，否则文本将以乒乓风格动画）

动画：

可变文本宽度 - 最大文本宽度 = 动画像素（例如，如果我的 VARIABLE TEXT WIDTH 是 150 像素，而我的 MAXIMUM TEXT WIDTH 是 100 PIXELS，我需要将文本设置为 50 像素 150-100 = 50 像素）

所以以上是我以最好的方式解释我需要的 JavaScript / CSS 集成脚本..

我将在下面包含我的 JavaScript，以便您查看如何从 MYSQL 数据库中获取信息，并提供动画的示例代码。

JAVASCRIPT：

function getPlaylist()
{
var xmlhttp,
timer;

if (window.XMLHttpRequest)
   {
   xmlhttp = new XMLHttpRequest();
   } 
else
   {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }

xmlhttp.onreadystatechange = function ()
    {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {

    var list = eval ('('+xmlhttp.responseText+')');
    {

document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
document.getElementById("list0titlelength").innerHTML=list[0].title.clientwidth;
document.getElementById("list0label").innerHTML=list[0].label;
document.getElementById("list0albumyear").innerHTML=list[0].albumyear;
document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="169" height="169"/>';

document.getElementById("list1artist").innerHTML=list[1].artist;
document.getElementById("list1title").innerHTML=list[1].title;
document.getElementById("list1label").innerHTML=list[1].label;
document.getElementById("list1albumyear").innerHTML=list[1].albumyear;
document.getElementById("list1picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="83px" height="83px"/>';

document.getElementById("list2artist").innerHTML=list[2].artist;
document.getElementById("list2title").innerHTML=list[2].title;
document.getElementById("list2label").innerHTML=list[2].label;
document.getElementById("list2albumyear").innerHTML=list[2].albumyear;
document.getElementById("list2picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="83px" height="83px"/>';

document.getElementById("list3artist").innerHTML=list[3].artist;
document.getElementById("list3title").innerHTML=list[3].title;
document.getElementById("list3label").innerHTML=list[3].label;
document.getElementById("list3albumyear").innerHTML=list[3].albumyear;
document.getElementById("list3picture").innerHTML='<img src="/testsite/covers/' + list[3].picture + '" width="83px" height="83px"/>';   

document.getElementById("list4artist").innerHTML=list[4].artist;
document.getElementById("list4title").innerHTML=list[4].title;
document.getElementById("list4label").innerHTML=list[4].label;
document.getElementById("list4albumyear").innerHTML=list[4].albumyear;
document.getElementById("list4picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="83px" height="83px"/>';   
    }


}
};

xmlhttp.onerror = function() 
{
    clearTimeout(timer);
    };

xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
xmlhttp.send();


timer = setTimeout(getPlaylist, 1000);
}

CSS 动画：

<!DOCTYPE html>
<html>
<head>
<script src="/testsite/OneSecondPlaylist.js"></script>
<style type="text/css">

#wrapper {
    width: 257.4px;
    height: 41.85px;
    overflow: hidden;
    background-color: #383838;
    color: #FFFFFF;
    line-height: 41.85px;
    font-size: 80%;
    font-family: baumans;
    color: #FFFFFF;
}

.textbox {
-moz-animation-duration: 4s;
    -moz-animation-name: slidein;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
    white-space:nowrap;
}
@-moz-keyframes slidein {
from {
    margin-left:3%;
    }
to {
    margin-left:-33%;
    }

</style>
</head>
<body onload="getPlaylist()">
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/baumans:n4:default.js" type="text/javascript"></script>
<div id="wrapper">
    <div id="list0artist"></div>
</div>
<div id="wrapper">
    <div id="list0title" class="textbox"></div>
</div>

</body>
</html>

动画说明：我知道我需要使用 webkit 才能让它在所有浏览器上运行

我希望我没有包含太多代码，我觉得完整展示它很重要，因为您可能在我所问的问题之外有一些指示..

所以总结一下，我基本上是在请你们帮我编写一个 JavaScript / CSS 集成脚本，该脚本将根据我定义的规则进行动画处理。

感谢您阅读本文，我希望您不要认为我懒惰地要求这个，我觉得我正在为那些编码知识为零并且只需要朝着正确方向推动的人取得良好进展！！！..很多谢谢！！！贾斯汀..

【问题讨论】：

您是否可以设置一个小提琴来展示您到目前为止所取得的进展？
更好的是，你能给我们举一个输出的 HTML、js 和 CSS 的例子吗？
@badAdviceGuy jsfiddle.net/Musicman/2hj2m
@ZachSaucier jsfiddle.net/Musicman/2hj2m
对不起...我应该注意..我目前只有在 Firefox 中运行的示例，稍后我将使用其他浏览器..

标签： javascript html css animation

【解决方案1】：

var texts = document.getElementsByClassName('text'); // Class I added to innards

for (var i = 0; i < texts.length; i++) {

    if (texts[i].parentNode.offsetWidth < texts[i].offsetWidth) {
        texts[i].classList.add("textbox");
    }
}

Demo

一些注意事项：

你不能有像.4px这样的小数像素，它会根据浏览器向上或向下舍入
我建议在动画中的某个时间点暂停，连续移动对用户来说很烦人
使用边距有点不确定，我可能会选择使用left。这就是我在演示中所做的

编辑

要解决动画的定位问题，您可以使用变换而不是 position:absolute。

transform:translateX(calc(-100% + 257px)); /* -100% + parent width */

Demo

但就像我之前说的，使用 js 解决方案可能会更好

【讨论】：

谢谢 Zach，我如何使关键帧的动画效果足以让文本从 START 到 END 来回弹跳（就像在我的 JSFiddle 中一样）:))
我的演示不就是这样吗？
是的，它正在工作，但如果文本长度变大或变小，那么动画将不会在正确的位置结束，由于关键帧设置jsfiddle.net/Musicman/4aqAp
最初我的 JSFiddle 有“left:-160%;”在关键帧中......我输入这个只是为了展示事情应该看起来如何......我该如何正确设置它:)）感谢您的时间！！！
@Justin 根据您的要求更新