<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 280px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
padding-bottom: 20px;
}
.tittle{
padding: 5px;
font-weight: bold;
color:#3c91cd;
}
.icon{
width: 50px;
height: 50px;
background: url(images/Icon.png) no-repeat; ;
float: left;
}
#sele{
float: left;
margin-left: 10px;
}
.yunshi{
float: left;
margin-left: 8px;
padding-top: 5px;
}
.hui{
width: 80px;
height: 13px;
display: inline-block;
background: url(images/yunshi.png) no-repeat;
position: relative;
}
.huang{
height: 13px;
display: inline-block;
background: url(images/yunshi.png) left bottom no-repeat ;
position: absolute;
}
p{
clear: both;
margin-left: 8px;
margin: 0;
padding-top: 10px;
width: 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取元素函数
function $(id){ return document.getElementById(id)}
var arr=[10,9,6,9];
var txtArr=["白羊座内容","金牛座内容","双子座内容","巨蟹座内容"]
$("huang").style.width= arr[0]*8+"px"
$("sele").onchange=function(){
//图标的位置
$("icon").style.backgroundPosition="0 " +(-this.value*50)+"px";
$("huang").style.width= arr[this.value]*8+"px"; //盒子一共80像素，一共分成十份，每一份为8像素
$("content").innerHTML=txtArr[this.value];
}
}
</script>
</head>
<body>
<div class="box">
<div class="tittle">星座运势</div>
<div class="bottom">
<div class="icon" id="icon"></div>
<select name="" id="sele">
<option value="0">白羊座(03.21-04.19)</option>
<option value="1">金牛座(04.20-05.20)</option>
<option value="2">双子座(05.21-06.21)</option>
<option value="3">巨蟹座(06.22-07.22)</option>
</select>
<div class="yunshi">今日运势:
<span class="hui">
<span class="huang" id="huang"></span>
</span>
<p id="content">白羊座内容</p>
</div>
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/zhaocong/p/6855308.html