Fatal编程技术网
  • javascript/
  • 使用Javascript&；用于创建文本字幕的CSS动画

使用Javascript&；用于创建文本字幕的CSS动画

javascript html css animation

使用Javascript&；用于创建文本字幕的CSS动画,javascript,html,css,animation,Javascript,Html,Css,Animation,我在找人帮忙 简史： function getPlaylist() { var xmlhttp, timer; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function ()

我在找人帮忙

简史：

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);
}

<!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>
我正在互联网上建立一个电台，这个网页将显示播放歌曲和过去播放的歌曲的元数据

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

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

我对编码是全新的，一切都进展顺利，我正在用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);
}

<!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>
我希望制作一个文本字幕，显示当前播放的歌曲的名称。 文本框将有一些规则

规则1:如果歌曲的名称等于或小于显示区域，则歌曲名称将在屏幕上保持不变

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

在进一步讨论之前，我需要注意的是，我已经查看了一些JQuery字幕，但没有一个适合我的需要

数学：

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);
}

<!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>
固定分割宽度=257.4像素

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

可变文本宽度=x个字符

（由“list0title”定义，它是MYSQL dB中的变量数据）（字符需要转换为像素，以便使用最大文本宽度）

最大文本宽度=250像素

（这是适合“包装器”的最大文本，如果可变文本宽度等于或小于最大文本宽度，则文本将是静态的，否则文本将以乒乓球样式设置动画）

动画：

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);
}

<!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>
可变文本宽度-最大文本宽度=要设置动画的像素 （例如，如果可变文本宽度为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);
}

<!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>
函数getPlaylist（） { var xmlhttp， 定时器； if（window.XMLHttpRequest） { xmlhttp=新的XMLHttpRequest（）； } 其他的 { xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）； } xmlhttp.onreadystatechange=函数（） { if（xmlhttp.readyState==4&&xmlhttp.status==200） { var list=eval（'（'+xmlhttp.responseText+'）； { document.getElementById（“list0artist”）.innerHTML=list[0]。艺术家； document.getElementById（“list0title”）.innerHTML=list[0]。标题； 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=''； document.getElementById（“list1artist”）.innerHTML=list[1]。艺术家； document.getElementById（“list1title”）.innerHTML=list[1]。标题； document.getElementById（“list1label”）.innerHTML=list[1]。标签； document.getElementById（“list1albumyear”）.innerHTML=list[1]。albumyear； document.getElementById（“list1picture”）.innerHTML=''； document.getElementById（“list2artist”）.innerHTML=list[2]。艺术家； document.getElementById（“list2title”）.innerHTML=list[2]。标题； document.getElementById（“list2label”）.innerHTML=list[2]。标签； document.getElementById（“list2albumyear”）.innerHTML=list[2]。albumyear； document.getElementById（“list2picture”）.innerHTML=''； document.getElementById（“list3artist”）.innerHTML=list[3]。艺术家； document.getElementById（“list3title”）.innerHTML=list[3]。标题； document.getElementById（“list3label”）.innerHTML=list[3]。label； document.getElementById（“list3albumyear”）.innerHTML=list[3]。albumyear； document.getElementById（“list3picture”）.innerHTML=''； document.getElementById（“list4artist”）.innerHTML=list[4]。艺术家； document.getElementById（“list4title”）.innerHTML=list[4]。标题； document.getElementById（“list4label”）.innerHTML=list[4]。label； document.getElementById（“list4albumyear”）.innerHTML=list[4]。albumyear； document.getElementById（“list4picture”）.innerHTML=''； } } }; xmlhttp.onerror=函数（） { 清除超时（计时器）； }; open（“GET”，“playlist.php？t=“+Math.random（），true”）； xmlhttp.send（）； 定时器=设置超时（getPlaylist，1000）； } CSS动画：

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);
}

<!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>


#包装纸{
宽度：257.4px；
高度：41.85px；
溢出：隐藏；
背景色：#3838；
颜色：#FFFFFF；
线高：41.85px；
字号：80%；
字体系列：baumans；
颜色：#FFFFFF；
}
.文本框{
-moz动画持续时间：4s；
-moz动画名称：slidein；
-moz动画迭代次数：无限；
-moz动画方向：交替；
-moz动画计时功能：线性；
空白：nowrap；
}
@-moz关键帧幻灯片{
从{
左缘：3%；
}
到{
左边缘：-33%；
}
var\uuuu adobebfontsappname=“dreamweaver”
动画说明：我知道我需要使用WebKit才能使其在所有浏览器上运行

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

总而言之，我基本上是在请你们帮我编写一个JavaScript/CSS集成脚本，它将根据我定义的规则进行动画制作

谢谢你通读这篇文章，我希望你不要认为我是b