`
cindylu520
  • 浏览: 142769 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

星级点评效果

    博客分类:
  • JS
 
阅读更多
 var sArray = new Object;
		 sArray[0] = new Image;
		 sArray[0].src = "/images/o/dbx.jpg";
		 for (var i=1; i<6; i++) {
		 sArray[i] = new Image();
		 sArray[i].src = "/images/o/dhx.jpg";
         var starTimer;
		 var pro ;
		 var rate ;
		 function initStar() {
		 	try {
			   setProfix("star_");
			   setStars(document.getElementById("commentImg").value,'commentImg');
			   setProfix("taste_");
			   setStars(document.getElementById("taste").value,'taste');
			   setProfix("price_");
			   setStars(document.getElementById("price").value,'price');
			   setProfix("environment_");
			   setStars(document.getElementById("environment").value,'environment');
		 	} catch(e){
		  	}
		 }
		 function showStars(starNum,rate) {
			 try {
			  clearStarTimer();
			  greyStars();
			  colorStars(starNum);
			  } catch(e){}
			  //setStars(starNum,rate);
			 }
		 function setProfix(profix) {
		   pro = profix ;
		 }
		 function colorStars(starNum) {
		  try {
		   for (var i=1; i <= starNum; i++) {
		    var tmpStar = document.getElementById(pro + i);
		    tmpStar.src = sArray[starNum].src;
		   }
		  } catch(e){}
		 }
		 function greyStars() {
		  try {
		   for (var i=1; i<6; i++) {
		    var tmpStar = document.getElementById(pro + i);
		    tmpStar.src = sArray[0].src;
		   }
		  } catch(e){}
		 }
		 function greyAll(curpro,currate) {
		  try {
		   document.getElementById(currate).value ="";
		   for (var i=1; i<6; i++) {
		    var tmpStar = document.getElementById(curpro + i);
		    tmpStar.src = sArray[0].src;
		   }
		  } catch(e){}
		 }
		 function setStars(starNum,rate) {
		  rate = rate ;
		  try {
		   clearStarTimer();
		   var commentImg = document.getElementById(rate);
		   commentImg.value = starNum;
		   showStars(starNum);
		   } catch(e){}
		 }
		 function clearStars(currate) {
		  rate = currate ;
		  try {
		   var commentImg = document.getElementById(rate);
		   if (commentImg.value != '') {
		    setStars(commentImg.value,rate);
		   } else {
		    greyStars();
		   }
		  } catch(e){}
		 }
		 function resetStars() {
		  try {
		   clearStarTimer();
		   var commentImg = document.getElementById(rate);
		   if (commentImg.value != '') {
		    setStars(commentImg.value,rate);
		   } else {
		    greyStars();
		   }
		  } catch(e){}
		 }
		 function clearStarTimer() {
			  if (starTimer) {
			   clearTimeout(starTimer);
			   starTimer = null;
			  }
		  }
		}

 

 

<input type="hidden" id="commentImg" name="commentImg" value="" >
 <a onmouseover="javascript:setProfix('star_');showStars(1,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(1,'commentImg');"><img src="/images/o/dbx.jpg" id="star_1" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(2,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(2,'commentImg');"><img src="/images/o/dbx.jpg" id="star_2" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(3,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(3,'commentImg');"><img src="/images/o/dbx.jpg" id="star_3" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(4,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(4,'commentImg');"><img src="/images/o/dbx.jpg" id="star_4" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(5,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(5,'commentImg');"><img src="/images/o/dbx.jpg" id="star_5" width="16" height="16" border="0" alt=""/></a>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics