关于星星打分效果的改写
发布网友
发布时间：2022-04-30 00:04
共3个回答
热心网友
时间：2022-04-22 07:55
1.鼠标在星星上面滑动，在未单击的情况下滑离，若干星星会变亮,正常来讲，用户不单击打分，鼠标离开后，星星都应该为灰色，不应该有*星星出现；
2.鼠标单击星星，效果正常，但用户无法对打分结果进行修改，从用户体验和网站友好度考虑，这是不足取的；
为了更好的完善打分效果，在原代码的基础上做了以下修改：克服了上述两点的不足。
<!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" />
<title>评价打分星星效果</title>
<script type="text/javascript">
function rate(obj,oEvent){
var imgSrc = 'http://image1.koubei.com/images/store/icon_star_1.gif';
var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.gif';
if(obj.rateFlag) return;
var e = oEvent || window.event;
var target = e.target || e.srcElement;
var imgArray = obj.getElementsByTagName("img");
for(var i=0;i<imgArray.length;i++){
imgArray[i]._num = i;
imgArray[i].onclick=function(){
if(obj.rateFlag) return;
alert(this._num+1);
var inputid=this.parentNode.previousSibling
inputid.value=this._num+1;
}
}
if(target.tagName=="IMG"){
for(var j=0;j<imgArray.length;j++){
if(j<=target._num){
imgArray[j].src=imgSrc_2;
} else {
imgArray[j].src=imgSrc;
}
target.parentNode.onmouseout=function(){
var imgnum=parseInt(target.parentNode.previousSibling.value);
for(n=0;n<imgArray.length;n++){
imgArray[n].src=imgSrc;
}
for(n=0;n<imgnum;n++){
imgArray[n].src=imgSrc_2;
}
}
}
} else {
return false;
}
}
</script>
</head>
<body>
<input type="hidden" value="0"/><p onmouseover="rate(this,event)">
<img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="很烂" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="一般" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="还好" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="较好" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="很好" />
</p>
</body>
</html>
热心网友
时间：2022-04-22 09:13
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js星级评分点击星级评论打分效果</title>
<meta name="description" content="js星级评论打分系统，制作鼠标滑过星级提示星级描述，点击星级评论打分效果。js代码" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{color:#666;font:12px/1.5 Arial;}
/* star */
.star{position:relative;width:600px;margin:20px auto;height:24px;margin-top: 80px}
.star ul,.star span{float:left;display:inline;height:19px;line-height:19px;}
.star ul{margin:0 10px;}
.star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(images/star.png) no-repeat;}
.star strong{color:#f60;padding-left:10px;}
.star li.on{background-position:0 -28px;}
.star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(images/icon.gif) no-repeat;padding:7px 10px 0;}
.star p em{color:#f60;display:block;font-style:normal;}
</style>
<script type="text/javascript">
window.onload = function (){
var oStars = document.querySelectorAll(".star");
var i = iScore = iStar = 0;
var aMsg = [
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
]
for (var j = oStars.length - 1; j >= 0; j--) {
(function(){
var oStar=oStars[j];
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oSpan = oStar.getElementsByTagName("span")[1];
var oP = oStar.getElementsByTagName("p")[0];
for (i = 1; i <= aLi.length; i++){
aLi[i - 1].index = i;
//鼠标移过显示分数
aLi[i - 1].onmouseover = function (){
fnPoint(this.index);
//浮动层显示
oP.style.display = "block";
//计算浮动层位置
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
//匹配浮动层文字内容
oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
};
//鼠标离开后恢复上次评分
aLi[i - 1].onmouseout = function (){
fnPoint();
//关闭浮动层
oP.style.display = "none"
};
//点击后进行评分处理
aLi[i - 1].onclick = function (){
iStar = this.index;
oP.style.display = "none";
oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
}
}
//评分处理
function fnPoint(iArg){
//分数赋值
iScore = iArg || iStar;
for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
}
}())
};
};
</script>
</head>
<body>
<div class="star">
<span>js星级评论打分</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div><!--star end-->
<div class="star">
<span>js星级评论打分</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div><!--star end-->
</body>
</html>
用你的DEMO稍加修改就可以了
追问测试的都没问题,但是在IE6里用不了啊.
热心网友
时间：2022-04-22 10:47
