星级评分 数组版 普通版

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,ul,li,p{margin:0;padding:0;}
body{color:#666;font:12px/1.5 Arial;}
ul{list-style-type:none;}
#star{position:relative;width:500px;margin:35px auto;}
#star ul,#star span{float:left;display:inline;height:35px;line-height:29px;}
#star ul{margin:0 10px;}
#star li{float:left;width:35px;cursor:pointer;text-indent:-9999px;background:url(../0519/star.gif) no-repeat;}
#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(../0519/star.gif) no-repeat;padding:70px 10px 0; }
#star p em{color:#f60;display:block;font-style:normal;}
</style>

<script type="text/javascript">

function mouseOver(a)
{
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li")[0];
for(var i=0;i<a;i++){
oUl.children[i].style.backgroundPosition='0 -29px';
}
}

 

function mouseOut()
{
var arr = new Array();

for(var i=0;i<5;i++){
arr[i]=document.getElementById('star').children[1].children[i];
arr[i].style.backgroundPosition='0 0';
}
}

function Click(p)
{alert(p+"分")
}

</script>

</head>
<body>
<div id="star" ">
<span>点击星星就能打分</span>

<ul>
<li onmouseover="mouseOver(1)" onmouseout="mouseOut()" onClick="Click(1)">1</li>
<li onmouseover="mouseOver(2)" onmouseout="mouseOut()" onClick="Click(2)">2</li>
<li onmouseover="mouseOver(3)" onmouseout="mouseOut()" onClick="Click(3)">3</li>
<li onmouseover="mouseOver(4)" onmouseout="mouseOut()" onClick="Click(4)">4</li>
<li onmouseover="mouseOver(5)" onmouseout="mouseOut()" onClick="Click(5)">5</li>
</ul>
</div>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ddd</title>
<style type="text/css">

body,div,ul,li,p{margin:0;padding:0;}
body{color:#666;font:12px/1.5 Arial;}
ul{list-style-type:none;}
#star{position:relative;width:500px;margin:35px auto;}
#star ul,#star span{float:left;display:inline;height:35px;line-height:29px;}
#star ul{margin:0 10px;}
#star li{float:left;width:35px;cursor:pointer;text-indent:-9999px;background:url(../0519/star.gif) no-repeat;}
#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(../0519/star.gif) no-repeat;padding:70px 10px 0; }
#star p em{color:#f60;display:block;font-style:normal;}

</style>
<script type="text/javascript">
window.onload = function(){
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li");
var i=0;

for(i=0;i<aLi.length;i++){
aLi[i].index = i;

aLi[i].onmouseover = function(){
for(i=0; i<=this.index; i++){
oUl.children[i].style.backgroundPosition='0 -29px';
}
}

aLi[i].onmouseout = function(){
for(i=0; i<=this.index; i++){
oUl.children[i].style.backgroundPosition='0 0';
}
}

aLi[i].onclick = function (){
{alert((this.index+1)+"分")
}
}

}
}

</script>
</head>
<body>
<div id="star" ">
<span>点击星星就能打分</span>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <style type="text/css">
   
  body,div,ul,li,p{margin:0;padding:0;}
  body{color:#666;font:12px/1.5 Arial;}
  ul{list-style-type:none;}
  #star{position:relative;width:500px;margin:35px auto;}
  #star ul,#star span{float:left;display:inline;height:35px;line-height:29px;}
  #star ul{margin:0 10px;}
  #star li{float:left;width:35px;cursor:pointer;text-indent:-9999px;background:url(../0519/star.gif) no-repeat;}
  #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(../0519/star.gif) no-repeat;padding:70px 10px 0; }
  #star p em{color:#f60;display:block;font-style:normal;}
   
  </style>
   
  <script type="text/javascript">
   
  function mouseOver1()
  {
  document.getElementById('star').children[1].children[0].style.backgroundPosition='0 -29px';
   
  }
   
  function mouseOver2()
  {
  document.getElementById('star').children[1].children[0].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[1].style.backgroundPosition='0 -29px';
  }
  function mouseOver3()
  {
  document.getElementById('star').children[1].children[0].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[1].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[2].style.backgroundPosition='0 -29px';
  }
  function mouseOver4()
  {
  document.getElementById('star').children[1].children[0].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[1].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[2].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[3].style.backgroundPosition='0 -29px';
  }
  function mouseOver5()
  {
  document.getElementById('star').children[1].children[0].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[1].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[2].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[3].style.backgroundPosition='0 -29px';
  document.getElementById('star').children[1].children[4].style.backgroundPosition='0 -29px';
  }
   
  function mouseOut()
  {
  document.getElementById('star').children[1].children[0].style.backgroundPosition='0 0';
  document.getElementById('star').children[1].children[1].style.backgroundPosition='0 0';
  document.getElementById('star').children[1].children[2].style.backgroundPosition='0 0';
  document.getElementById('star').children[1].children[3].style.backgroundPosition='0 0';
  document.getElementById('star').children[1].children[4].style.backgroundPosition='0 0';
  }
   
  function Click1(p)
  {alert(p+"分")
  }
   
  </script>
   
  </head>
  <body>
  <div id="star" ">
      <span>点击星星就能打分</span>
     
      <ul>
          <li onmouseover="mouseOver1()" onmouseout="mouseOut()" onClick="Click1(1)">1</li>
          <li onmouseover="mouseOver2()" onmouseout="mouseOut()" onClick="Click1(2)">2</li>
          <li onmouseover="mouseOver3()" onmouseout="mouseOut()" onClick="Click1(3)">3</li>
          <li onmouseover="mouseOver4()" onmouseout="mouseOut()" onClick="Click1(4)">4</li>
          <li onmouseover="mouseOver5()" onmouseout="mouseOut()" onClick="Click1(5)">5</li>
      </ul>
    
  </div>
  </body>
  </html>
 

posted on 2014-08-22 17:38  moliwanzi  阅读(110)  评论(0)  编辑  收藏  举报

导航