有人可以检查一下我的代码吗？谢谢
如果您想测试，这里是 fiddle 站点: http://jsfiddle.net/66QYr/
我希望前 3 个文本显示在左侧(垂直) 然后接下来的 3 个文本出现在右侧(垂直) 然后接下来的 2 个文本出现在右下角(垂直) 最后 2 个文本出现在左下角(垂直)
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic001.png
<html>
<head>
<title>tintin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tintin{
position: relative;
top: 211px;
left: 12px;
font-size:14pt;
font-weight:bold;
font-family: Calibri;
color:red;
filter:alpha(opacity=0);
opacity:0;}
.image{
height:350px;
width: 855px;}
</style>
<script type="text/javascript">
var txt=['text1','text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'], init=0,i=0,k=0,speed=20,el;
var loopCount=1000;
var j=0;
//var padd = 20; //set this to an approriate increment
function fade(){
init==0?i++:i--;
el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100;
el.firstChild.nodeValue=txt[k];
if(i==100)init=1;
if(i==0) {init=0;k++;j++;
el.style.paddingLeft=20*k;
}
if(k==txt.length)k=0;
if (j<loopCount) setTimeout('fade()',speed);
}
window.onload=function(){
el=document.getElementById('tintin');
fade();
}
</script>
</head>
<body>
<div id="tintin"> </div>
<div class="image" style="background-image:url('pic007s.jpg')">;
</div>
</body>
</html>
最佳答案
您试图在这里解决两个问题:
- 将文本放置在适当的位置
- 让它们淡入
第一步
第一个问题可以通过一些简单的 CSS 来解决。从容器开始:
#container {
position:relative;
width:150px;
height:150px;
}
<div id="container"></div>
宽度和高度可以是任何值，但您必须告诉它一些东西。我们将把文本放入此容器中，然后使用 position:absolute。这将使它们脱离正常的文档流，如果我们告诉它一个明确的高度，就会折叠容器。
下一步是文本。您需要四个 div，其中的文本为段落:
<div class="text" id="text1">
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
</div>
对您想要的四个文本 block 中的每一个执行此操作。对每个类使用相同的类名，但为每个类提供自己的唯一 ID(text2、text3 等)。
最后，只需使用(正如我之前所说的)绝对定位将它们放置在您想要的位置:
.text { position:absolute; }
#text1 { top:0; left:0; }
#text2 { top:0; right:0; }
...等等。完成后，您应该得到如下所示的内容:
第二步
淡入淡出的元素需要动画。你有基本的动画功能，但我建议你阅读Robert Penner's article关于补间和动画。它是为 ActionScript 编写的，但适用完全相同的原则。
目前，这是一个很好的通用 JavaScript 方法，它将获取一个元素并将其淡入:
function fadeIn(totalTime, elem, after) {
var cos = Math.cos,
PI = Math.PI,
startTime = +new Date(),
endTime = startTime + totalTime,
timer;
elem.style.opacity = 0;
elem.style.filter = 'alpha(opacity=0)';
timer = setInterval(function () {
var currentTime = +new Date();
currentTime = currentTime > endTime ? 1 : (currentTime - startTime) / totalTime;
var distance = (1 - cos(currentTime * PI)) / 2;
elem.style.opacity = distance;
elem.style.filter = 'alpha(opacity=' + distance * 100 + ')';
if (currentTime === 1) {
clearInterval(timer);
if (after) {
after();
}
}
}, 40);
}
您可以告诉此函数您希望动画持续多长时间(以毫秒为单位)，您还可以给它一个在淡入淡出完成时执行的函数(如果您愿意；这不是必需的) )。
如果我正确理解你的问题，你希望所有文本开始不可见，然后淡入，一次一个，从顶部顺时针方向。我们可以用CSS使它们不可见，但是如果用户禁用了JS，页面将显示为空白。因此，您需要首先“获取”所有元素(使用某种 getByClass 函数或对 getElementById 进行四种不同的调用)并将其不透明度设置为 0。
因此，您可以通过执行以下操作使第一组文本淡入:
var text1 = document.getElementById('text1');
fadeIn(1000, text1);
问题是，通过这样做，无法知道何时开始下一个动画。因此，我们需要在闭包的帮助下创建一个函数来帮助跟踪事物(这假设您已经在 JS 中获取了元素并使它们不可见):
var tracker = (function () {
var texts = [text1, text2, text3, text4],
i = 0;
return function () {
var text = texts[i];
if (text) {
fadeIn(1000, text, tracker);
i += 1;
}
};
}());
此函数循环遍历每个元素，并在前一个元素完成后淡入。 (如果代码没有多大意义也没关系；闭包是很棘手的事情。)
关于javascript - 如何使用 javascript 在有序列表中显示文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5936290/