html - 使用CSS旋转，从左到右依次显示信息

Question

好的，这是一个很奇怪的问题，但我创建了一个展示电影的时间线和上映日期，而且我有很多电影想要垂直显示为文本。我希望每部电影彼此相邻出现，从左到右。

这是我目前拥有的-

http://ignitethatdesign.com/CheckFilm/index1.php

这是一个混合混搭，因为我正在播放的第一部电影显示在顶部。

我从数据库中调用数据，如果每部电影发行之间有几天，就会出现一张图像

任何帮助将不胜感激我迷失在 CSS 的海洋中

Answer 1

这在 Flash 中可以很容易地完成，但鉴于趋势正在远离 flash，因此在 html 5 中执行此操作是有意义的。执行此操作的 html 5 方法可能很有趣它在 html 5 画布中。

鉴于这些都不感兴趣，以您目前拥有的东西为例，在javascript中启动一种计时器似乎是个好主意，该计时器将调用一个函数来遍历li并将它们向下移动......

例如

var t=setTimeout("moveListItems()", 500); // just adjust the time in milliseconds to make                                           
                                          // it faster or slower.

function moveListItems() {
    // place move list items code here
    //probably a call to update the css "top" 
    $('#horiz_container li').each(function() {
       alert(index + ': ' + $(this).text());
       var newtop = $(this).position().top + 250;
       $(this).css('top', newtop + 'px');
       //check if the top is too low then reset to top to the top of the container
    });

}

注意：未经测试

你可能需要稍微调整一下，让 li 绝对，这样他们就不会在移动时搞砸布局，但这就是我的做法。如果我再这样做，那么我将犯下违反黑客精神的罪行。玩得开心！