漂亮点亮星星评分js特效

9个月前 (03-10 13:15)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

点亮星星进行评分效果，网页常用的一种文章评分网页特效，在需要使用到的页面中直接套用即可。

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>漂亮的点亮星级评价效果_武鸣人</title>
<style type="text/css">
body{
margin:0;padding:0 10px;color:#333;text-align:center;font:12px Arial,Helvetica,sans-serif;
}
h1,h2,h3,h4,h5,h6,form,ul,img{
margin:0;padding:0;border:0;
}
li{
list-style:none;
}
div#AddDP{
text-align:left;margin-top:20px;border:1px solid #ffdfb6;background:#fffbf5;
}
div#AddDP h5{
margin:0;padding:5px;background:#fff3dd;font-size:14px;
}
div#AddDP ul.Star{
margin-top:8px;margin-left:6em;
}
div#AddDP ul.Star li{
float:left;margin-right:8px;margin-bottom:5px;margin-bottom:0;list-style:none;
}
div#AddDP ul.Star li span.Select{
float:left;padding:5px;border:1px solid #ffcc00;display:block;
}
div#AddDP ul.Star li span.Select img{
vertical-align:middle;
}
</style>
<script language="javascript">
var sArray = new Object;
sArray[0] = new Image;
sArray[0].src = "/img/20240310_www_wuming_ren_3.gif";
for (var i=1; i<6; i++) {
sArray[i] = new Image();
sArray[i].src = "/img/20240310_www_wuming_ren_4.gif";
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var starTimer;
var pro ;
var rate ;
function initStar() {
try {
setProfix("star_");
setStars(document.getElementById("rating").value,'rating');
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 rating = document.getElementById(rate);
rating.value = starNum;
showStars(starNum);
} catch(e){}
}
function clearStars(currate) {
rate = currate ;
try {
var rating = document.getElementById(rate);
if (rating.value != '') {
setStars(rating.value,rate);
} else {
greyStars();
}
} catch(e){}
}
function resetStars() {
try {
clearStarTimer();
var rating = document.getElementById(rate);
if (rating.value != '') {
setStars(rating.value,rate);
} else {
greyStars();
}
} catch(e){}
}
function clearStarTimer() {
if (starTimer) {
clearTimeout(starTimer);
starTimer = null;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="AddDP">
  <h5>添加点评</h5>
  <form name="formappraisement" action="https://www.wuming.ren" method="post">
    <input name="appraisementflag" id="appraisementflag" value="0" type="hidden">
    <input id="appraisementcity" name="appraisementcity" value="168" type="hidden">
    <input id="appraisementstoreid" name="appraisementstoreid" value="3edcff4f33564c4f9ddf6e2026135eea" type="hidden">
    <input id="rating" name="serving" value="" type="hidden">
    <input id="taste" name="taste" value="1" type="hidden">
    <input id="price" name="price" value="5" type="hidden">
    <input id="environment" name="environment" value="2" type="hidden">
    <div>
      <ul class="Star">
        <li><span class="number">*</span>服务<span class="Select"> <a onmouseover="javascript:setProfix('star_');showStars(1,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(1,'rating');"><img id="star_1" title="差(1)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(2,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(2,'rating');"><img id="star_2" title="一般(2)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(3,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(3,'rating');"><img id="star_3" title="好(3)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(4,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(4,'rating');"><img id="star_4" title="很好(4)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(5,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(5,'rating');"><img id="star_5" title="非常好(5)" src="/img/20240310_www_wuming_ren_3.gif"></a> </span></li>
        <li><span class="number">*</span>口味<span class="Select"> <a onmouseover="javascript:setProfix('taste_');showStars(1,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(1,'taste');"><img id="taste_1" title="差(1)" src="/img/20240310_www_wuming_ren_4.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(2,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(2,'taste');"><img id="taste_2" title="一般(2)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(3,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(3,'taste');"><img id="taste_3" title="好(3)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(4,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(4,'taste');"><img id="taste_4" title="很好(4)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(5,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(5,'taste');"><img id="taste_5" title="非常好(5)" src="/img/20240310_www_wuming_ren_3.gif"></a> </span></li>
        <li><span class="number">*</span>环境<span class="Select"> <a onmouseover="javascript:setProfix('environment_');showStars(1,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(1,'environment');"><img id="environment_1" title="差(1)" src="/img/20240310_www_wuming_ren_4.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(2,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(2,'environment');"><img id="environment_2" title="一般(2)" src="/img/20240310_www_wuming_ren_4.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(3,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(3,'environment');"><img id="environment_3" title="好(3)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(4,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(4,'environment');"><img id="environment_4" title="很好(4)" src="/img/20240310_www_wuming_ren_3.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(5,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(5,'environment');"><img id="environment_5" title="非常好(5)" src="/img/20240310_www_wuming_ren_3.gif"></a> </span></li>
        <li><span class="number">*</span>性价比<span class="Select"> <a onmouseover="javascript:setProfix('price_');showStars(1,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(1,'price');"><img id="price_1" title="差(1)" src="/img/20240310_www_wuming_ren_4.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(2,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(2,'price');"><img id="price_2" title="一般(2)" src="/img/20240310_www_wuming_ren_4.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(3,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(3,'price');"><img id="price_3" title="好(3)" src="/img/20240310_www_wuming_ren_4.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(4,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(4,'price');"><img id="price_4" title="很好(4)" src="/img/20240310_www_wuming_ren_4.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(5,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(5,'price');"><img id="price_5" title="非常好(5)" src="/img/20240310_www_wuming_ren_4.gif"></a> </span></li>
      </ul>
    </div>
    <div style="clear:both"></div>
  </form>
</div>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/262.html

星星评分
回帖

漂亮点亮星星评分js特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息