最近学了一个商品五星评价的案例&＃xff0c;又稍加修改完善&＃xff0c;基本和淘宝的评价效果一致。
运行效果如图所示。
这实际上是用了红白两张星星图片&＃xff0c;鼠标移上时&＃xff0c;红色星星&＃xff0c;鼠标离开时&＃xff0c;白色星星&＃xff1b;点击时&＃xff0c;锁定状态&＃xff0c;再点击&＃xff0c;解锁。
完整代码如下&＃xff1a;
<!DOCTYPE html>
<html><head><meta charset&＃61;"utf-8" /><title>淘宝五星评分</title><style>#mark{width: 360px;}#mark img{width: 24px;height: 24px;}.pic{font-size: 24px;}.float_r{float: right;}</style></head><body><div id&＃61;"wrap"><div id&＃61;"mark"><div id&＃61;"pic1" class&＃61;"pic" onmouseover&＃61;"comments(1)"><strong>描述相符</strong><img src&＃61;"img/starw.png" name&＃61;"star1" data-index&＃61;"1"><img src&＃61;"img/starw.png" name&＃61;"star2" data-index&＃61;"2"><img src&＃61;"img/starw.png" name&＃61;"star3" data-index&＃61;"3"><img src&＃61;"img/starw.png" name&＃61;"star4" data-index&＃61;"4"><img src&＃61;"img/starw.png" name&＃61;"star5" data-index&＃61;"5"><span id&＃61;"txt1"> </span></div><div id&＃61;"pic2" class&＃61;"pic" onmouseover&＃61;"comments(2)"><strong>物流服务</strong><img src&＃61;"img/starw.png" name&＃61;"star1" data-index&＃61;"1"><img src&＃61;"img/starw.png" name&＃61;"star2" data-index&＃61;"2"><img src&＃61;"img/starw.png" name&＃61;"star3" data-index&＃61;"3"><img src&＃61;"img/starw.png" name&＃61;"star4" data-index&＃61;"4"><img src&＃61;"img/starw.png" name&＃61;"star5" data-index&＃61;"5"><span id&＃61;"txt2"> </span></div><div id&＃61;"pic3" class&＃61;"pic" onmouseover&＃61;"comments(3)"><strong>服务评价</strong><img src&＃61;"img/starw.png" name&＃61;"star1" data-index&＃61;"1"><img src&＃61;"img/starw.png" name&＃61;"star2" data-index&＃61;"2"><img src&＃61;"img/starw.png" name&＃61;"star3" data-index&＃61;"3"><img src&＃61;"img/starw.png" name&＃61;"star4" data-index&＃61;"4"><img src&＃61;"img/starw.png" name&＃61;"star5" data-index&＃61;"5"><span id&＃61;"txt3"></span></div><br><button type&＃61;"button" class&＃61;"float_r" onClick&＃61;"submit()">提交评价</button></div><!--end mark--></div></body><script type&＃61;"text/Javascript">function comments(num){var pic &＃61; document.getElementById("pic"&＃43;num);var imgList &＃61; pic.getElementsByTagName("img");var comments&＃61;["非常差","差","一般","好","非常好"];var txt&＃61; document.getElementById("txt"&＃43;num);var flag&＃61;false;for(var i&＃61;0;i<imgList.length;i&＃43;&＃43;){imgList[i].onmouseover&＃61; function(){if(!flag){var index &＃61; this.getAttribute("data-index");for(var j&＃61;0;j<index;j&＃43;&＃43;){imgList[j].setAttribute("src","img/starred.png");} //index之前的红色星txt.innerHTML&＃61;comments[index-1];}else{return;}}imgList[i].onmouseout&＃61; function(){if(!flag){var index &＃61; this.getAttribute("data-index");for(var j&＃61;0;j<imgList.length;j&＃43;&＃43;){imgList[j].src&＃61;"img/starw.png";}txt.innerHTML&＃61;"";}else{return;}}imgList[i].onclick &＃61; function(){flag&＃61;!flag;var index &＃61; this.getAttribute("data-index");for(var k&＃61;index;k<imgList.length;k&＃43;&＃43;){imgList[k].setAttribute("src","img/starw.png");} //index之后的置成白色星}}}function submit(){document.write(&＃39;谢谢您的评价!&＃39;);}</script>
</html>
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有