我正在思考如何使用 html 元素来做到这一点。
颜色没有什么特别的，所以我不需要把它们做成图像。
请注意，文本是右对齐的。此外，颜色条从左侧上升到文本。
因此，这可以通过让文本向右浮动、背景颜色为白色，并在其旁边设置一个背景颜色的 div（然后是透明的）来实现。
或者代替浮动，我可以进行文本右对齐并获得类似的效果。
这是最关键的。
我正在使用 javascript 库（无论是哪一个）来创建动画。动画是条向左收缩，最终像这样：
浮动或文本对齐方法的问题在于，必须更改太多值才能在两种状态之间转换。 JavaScript 动画效果往往想要更改几个预定义的值，例如宽度或字体大小。为了使用浮动或文本对齐方法从图片1转移到图片2，我必须删除浮动/文本对齐然后设置条形颜色的宽度，但如果我想保留javascript，这不起作用对于这样一个简单的任务来说，开销最小。
我尝试过绝对定位/宽度，但我无法得到任何东西来使文本右对齐并使条形在左侧的同一点相遇。
我希望也许我只是对一个简单的解决方案视而不见，但正如我所见，我需要一个将文本以某种方式定位在右侧的元素，以及一个在其旁边占用尽可能多的空间的元素...并且具有颜色的元素应该能够采用宽度，同时让文本跟随在其旁边。
谢谢。
这是我的尝试。Note:令一些反桌子狂热者感到恐惧的是，这确实使用了桌子。浮动不能像表格那样“占据所有可用空间”。
<html>
<head>
<style type="text/css">
table { width: 300px; background: #DDD; empty-cells: show; }
th { padding-left: 8px; width: 100%; height: 1em; }
td { padding-left: 12px; width: auto; }
div { white-space: nowrap; }
#row1 th { background: red; }
#row2 th { background: blue; }
#row3 th { background: green; }
#row4 th { background: yellow; }
#row5 th { background: pink; }
#row6 th { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("th").animate({ width: 0 }, 2000);
});
});
</script>
</head>
<body>
<table><tr id="row1"><th></th><td><div>FOO</div></td></tr></table>
<table><tr id="row2"><th></th><td><div>BAR</div></td></tr></table>
<table><tr id="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table>
<table><tr id="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table>
<table><tr id="row5"><th></th><td><div>BLAH</div></td></tr></table>
<table><tr id="row6"><th></th><td><div>BLAH</div></td></tr></table>
</body>
</html>
我想到了一种效果很好的非表格方法，所以这里是：
<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("div.text").animate({ width: "90%" }, 2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
