js网页特效漂亮的星级评价效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<title>js网页特效漂亮的星级评价效果</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 = "http://www.5xsj.net/img/201201/icon_star_1.gif";
for (var i=1; i<6; i++) {
sArray[i] = new Image();
sArray[i].src = "http://www.5xsj.net/img/201201/icon_star_2.gif";
}
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;
}
}
</script>
</head>
<body>
<div id="AddDP">
<h5>添加点评</h5>
<form name="formappraisement" action="" 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="26135eea" 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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_2.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_2.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="http://www.5xsj.net/img/201201/icon_star_2.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_1.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="http://www.5xsj.net/img/201201/icon_star_2.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="http://www.5xsj.net/img/201201/icon_star_2.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="http://www.5xsj.net/img/201201/icon_star_2.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="http://www.5xsj.net/img/201201/icon_star_2.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="http://www.5xsj.net/img/201201/icon_star_2.gif"></a> </span></li>
</ul>
</div>
<div style="clear:both"></div>
</form>
</div>
</body>
</html>


源地址:http://www.5xsj.net/Webs_View.asp?id=1094

posted @   Seaurl  阅读(1085)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae