<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
