Javascript 如何从下到上设置条形图的动画?
我正在尝试制作一个条形图,并且该条形图现在从上到下进行动画制作,但我希望它从下到上进行动画制作。我如何让它从下到上 CSSJavascript 如何从下到上设置条形图的动画?,javascript,jquery,css,charts,Javascript,Jquery,Css,Charts,我正在尝试制作一个条形图,并且该条形图现在从上到下进行动画制作,但我希望它从下到上进行动画制作。我如何让它从下到上 CSS .bar { width:50px; height:250px; list-style-type:none; } .bar p { background-color:#63F; } .bar span { padding-left:15px; left:100%; } #content ul { list-style-type:none; } #content ul
.bar {
width:50px;
height:250px;
list-style-type:none;
}
.bar p {
background-color:#63F;
}
.bar span {
padding-left:15px;
left:100%;
}
#content ul {
list-style-type:none;
}
#content ul li {
float:left;
margin:50px;
}
.perfect
{
padding-top:30px;
width:500px;
height:300px;
position:relative;
background-color:#efefef;
}
.perfect .bar
{
float:left;
position:relative;
width:40px;
height:100%;
margin-left:5px;
}
.perfect .bar .slideup
{
position:absolute;
bottom:0px;
width:40px;
background-color:#fff000;
border:1px solid #000;
}
.perfect .bar .slideup span
{
display:block;
position:absolute;
margin:5px;
top:-30px;
}
$(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find(".slideup").delay(500).animate({'height':length},
"slow",function(){$(this).find("span").fadeIn(1000);
});
});
});
HTML
<div id="content">
<ul>
<li>
<div class="bar">
<p><span>50%</span></p>
</div><br>
Freshmen
</li>
</ul>
</content>
<div class="perfect">
<div class="bar">
<div class="slideup">
<span>20%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>30%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>10%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>100%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>50%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>60%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>55%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
</div>
-
50%
新生
Javascript
<script src="../../jquery-1.6.4.min.js"></script>
$(document).ready(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find("p").delay(500).animate({'height':length},3500,function(){$(this).find("span").fadeIn(1000);
});
});
});
$(文档).ready(函数(){
$(“.bar”)。每个(函数(){
var length=$(this.find(“span”).html();
$(this.find(“p”).delay(500).animate({'height':length},3500,function(){$(this.find(“span”).fadeIn(1000);
});
});
});
您可以在栏中定义位置:绝对。这样写:
.bar {
width:50px;
height:250px;
list-style-type:none;
position:relative;
}
.bar p {
background-color:#63F;
position:absolute;
bottom:0;
left:0;
}
选中此项您也可以使用css关键帧来实现这一点,例如webkit css html
大一新生
70%
CSS
.bar {
width:50px;
height:250px;
list-style-type:none;
}
.bar p {
background-color:#63F;
}
.bar span {
padding-left:15px;
left:100%;
}
#content ul {
list-style-type:none;
}
#content ul li {
float:left;
margin:50px;
}
.perfect
{
padding-top:30px;
width:500px;
height:300px;
position:relative;
background-color:#efefef;
}
.perfect .bar
{
float:left;
position:relative;
width:40px;
height:100%;
margin-left:5px;
}
.perfect .bar .slideup
{
position:absolute;
bottom:0px;
width:40px;
background-color:#fff000;
border:1px solid #000;
}
.perfect .bar .slideup span
{
display:block;
position:absolute;
margin:5px;
top:-30px;
}
$(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find(".slideup").delay(500).animate({'height':length},
"slow",function(){$(this).find("span").fadeIn(1000);
});
});
});
HTML
<div id="content">
<ul>
<li>
<div class="bar">
<p><span>50%</span></p>
</div><br>
Freshmen
</li>
</ul>
</content>
<div class="perfect">
<div class="bar">
<div class="slideup">
<span>20%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>30%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>10%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>100%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>50%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>60%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>55%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
</div>
单击此处查看使用关键帧设置css属性的动画,例如宽度 设置元素(例如div)的宽度后,动画将开始播放
谢谢您的帮助。你能给我解释一下为什么它们需要定位吗?在HTML中,默认情况下高度从上到下增加。所以这就是为什么我们使用position:absolute with bottom:0从.bar DIV的底部开始生成P。现在,当P height增加时,无法扩展bottom.Kudos-您是否能够演示如何使其水平而不是垂直地增长。@Kudos-我查看了您的示例,它工作得很好,但是如果需要,代码会如何更改多个酒吧?而不是硬编码动态添加它们?在我的main.js中,我使用了手柄来生成这些条,在你的代码中,由于css,这些条的高度都是相同的。我正在尝试传递高度数组和标签数组。这是我的回复: