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>
分享到:
相关推荐
利用jquery实现的一个简单的星级评价的例子,有疑问可以给T出来
主要为大家详细介绍了JavaScript实现星级评价效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了Vue实现星级评价效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
主要为大家详细介绍了微信小程序实现星级评价效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
js实现的星级评论打分效果,比较简单,但是还算比较实用吧。分享一下 <span>js星级评论打分 ;">1 ;">2 ;">3 ;">4 ;">5 </ul>
先来个截图:效果很简单,可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法:CSS: 代码 复制代码代码如下: .jsstar { list-style: none; margin: 0px; padding: 0px; width: 100px;...
效果描述: 不需要js支持,只用CSS3就可以实现的评分效果 使用方法: 1、将CSS中的样式拷贝到你的网页中 2、将body中需要的代码部分拷贝到你需要的地方即可
jQuery星级打分效果,类似淘宝或者外卖软件,星级打分给与评价的一个效果
仿雅虎口碑网星级评分,完美使用Jquery进行实现,代码也尽量通俗简洁,希望对大家有帮助
很多网站都应用了星级评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery和PHP来实现星级评分效 果。 1.本例实现的效果:过渡动画显示评分操作。...
实现效果图如下所示: 评价页 点击看大图,且可左右滑动 功能需求分析 1.默认为5颗星,为非常满意,4颗满意,根据不同星级显示不同满意程度。 2.评价内容,最多为200字。 3.上传图片最多上传6张,图片不可...
js星级评论打分系统,制作鼠标滑过星级提示星级描述,点击星级评论打分效果。js代码
jquery星级评分特效制作电影视频网站滑动星星打分效果
Jquery打分评星级效果源码 源码描述: ... 1、jquery打分评星级效果实现打分及评价内容 2、可获取评价的单独的平分及平均分 二、注意事项 1、开发环境为Visual Studio 2010,使用.net 4.0开发。
星级评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery和PHP来实现星级评分效果