仿一淘今日价格幅度动画
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.8.3.js"></script>
<style>
*{
? margin:0;
? padding:0;
}
#out_div{
? margin-top:50px;
? margin-left:50px;
? position: relative;
? height:304px;
? width:214px;
}
#up{
? position:relative;
? border:1px solid red;
? height:150px;
? width:214px;
? overflow:hidden;
}
#up1{
? background-image:url(arrow1.png);
? background-position:0 0;
? background-repeat:no-repeat;
? background-color:#3c3;
? position:absolute;
? height:150px;
? width:214px;
}
#down{
? margin-top:5px;
? position:relative;
? height:150px;
? width:214px;
? border:1px solid red;
? overflow:hidden;
}
#down1{
? background-image:url(arrow1.png);
? background-color:#f90;
? background-position:0 -155px;
? background-repeat:no-repeat;
? position:absolute;
? height:150px;
? width:214px;
}
#price_word{
? font-size:28px;
}
#price_num{
? font-size:28px;
? color:#3C3;
}
#price_num b{
? font-size:58px;
}
#up_word{
? padding-top:40px;
}
#down_num{
? padding-top:20px;
}
#up_word,#down_word,#up_num, #down_num{
? font-size:20px;
? color:#fff;
? text-align:center;
}
#up_num b, #down_num b{
?? font-size:48px;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="out_div">
?? <div id="price_word">今日价格幅度</div>
?? <div id="price_num">降<b>1.31%</b></div>
?? <div id="up">
????? <div id="up1">
???????? <div id="up_word">
????? 平均涨幅
????? </div>
????? <div id="up_num">
????? <b>24</b>.19%
????? </div>
?? </div>
?? </div>
?? <div id="down">
????? <div id="down1">
???????? <div id="down_num">
????? <b>20</b>.18%
????? </div>
????? <div id="down_word">
????? 平均降幅
????? </div>
?? </div>
?? </div>
</div>
<script>
/*
*? 仿一淘今日价格幅度动画；
*? ie8，ff，opera中可用，其他浏览器未测；
*? *********made by keimon************
*? **********2013-01-16***********
*/
$(window).load(function(){
?? $('#up1').css('bottom','-150px').animate({'bottom':'0'},1000);
?? $('#down1').css('top','-150px').animate({'top':'0'},1000);
})
</script>
</body>
</html>
