Question

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

简史：

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

到目前为止，我已经设法构建了一个MYSQL数据库，用PHP查询数据库，用JSON编码数据数组，使用ajax设置一个定时器来查询数据库，用JavaScript来解析数据到HTML ...... / p>

我还设法了解HTML＆amp; CSS在一定程度上..

我对编码很陌生，一切都很顺利，我正在做一些JavaScript课程，但我想要的是迄今为止我所采取的任何课程都太先进了....

问题：

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

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

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

在你再进一步之前，我需要注意的是，我已经看了几个JQuery的马戏团，但没有一个能满足我的需求

数学：

FIXED DIV WIDTH = 257.4像素

（这是包装变量文本的“包装器”（比我的最大文本宽度稍大，所以看起来很漂亮......）

VARIABLE TEXT WIDTH = x个字符

（由“list0title”定义，它是来自MYSQL dB的可变数据）（这些字符需要转换为像素才能与MAXIMUM TEXT WIDTH一起使用）

MAXIMUM TEXT WIDTH = 250像素

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

动画：

可变文本宽度 - 最大文本宽度=动态像素（例如，如果我的VARIABLE TEXT WIDTH为150像素而我的最大文本宽度为100像素，我需要将文本设置为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>

动画注意：我知道我需要使用webkits才能在所有浏览器上运行

我希望我没有包含太多的代码，我觉得完整地显示它是很重要的，因为你可能会在我提出的问题之外有一些指示......

总而言之，我基本上要求你们帮我编写一个JavaScript / CSS集成脚本，根据我定义的规则制作动画。

感谢您阅读此内容，我希望您不要以为我懒得问这个，我觉得我正在为那些没有编码知识而只需要推动正确方向的人取得良好的进展!!! ..许多谢谢！！！贾斯汀..

Answer 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。这就是我在演示中所做的。

修改

要修复动画的定位问题，您可以使用变换而不是位置：绝对。

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

Demo

但正如我之前所说，使用js解决方案可能会更好

使用Javascript＆amp;用于创建TEXT选框的CSS动画

1 个答案: