javascript+css好多网站用的选星星实现打分功能的函数
函数有两个参数，功能如下：
obj： img标签组的父容器，类型为DOM对象；
oEvent： event对象。
这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候，我用的是个alert事件。事实上， 把this._num+1这个数字写入到数据库中,作为评分的依据就可以了
需要的两张图片：
<!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=utf-8" />
<title>脚本之家_www.jb51.net_阿当制作选星星打分 </title>
<style type="text/css">
.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;}
.starWrapper img{cursor:pointer;}
</style>
<script type="text/javascript">
function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = 'http://www.jb51.net/upload/20080508122008586.gif'; //没有填色的星星
var imgSrc_2 = 'http://www.jb51.net/upload/20080508122010810.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;
obj.rateFlag=true;
alert(this._num+1); //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;
}
}
} else {
for(var k=0;k <imgArray.length;k++){
imgArray[k].src=imgSrc;
}
}
}
</script>
<body>
<p class="starWrapper" onmouseover="rate(this,event)">
<img src="http://www.knowsky.com/http://www.jb51.net/upload/20080508122008586.gif" title="很烂" /> <img src="http://www.knowsky.com/http://www.jb51.net/upload/20080508122008586.gif" title="一般" /> <img src="http://www.knowsky.com/http://www.jb51.net/upload/20080508122008586.gif" title="还好" /> <img src="http://www.knowsky.com/http://www.jb51.net/upload/20080508122008586.gif" title="较好" /> <img src="http://www.knowsky.com/http://www.jb51.net/upload/20080508122008586.gif" title="很好" />
</body>
</html>
分享到：
相关推荐
在本教程中，我们将探讨如何利用JS实现一个星星评分效果，这个效果常见于评论系统或者产品评分中，用户可以通过点击星星来选择评分。我们将通过源码分析来理解这一过程。 首先，我们需要创建HTML结构来展示星星，...
这种效果可以通过JavaScript（简称js）来实现，使得页面更加生动有趣。下面将详细介绍如何使用JavaScript制作星星打分效果。 1. **HTML基础结构**： 首先，我们需要在HTML中创建一个评分区域，通常使用`<div>`或`...
本文实例讲述了js实现星星打分效果的方法。分享给大家供大家参考。具体分析如下： 很多网站都有如下图这样的星星打分效果，今天就看下用js怎么实现打分效果。 效果详解 1. 鼠标移上的时候星星点亮，下面的文字显示...
《jQuery Raty：实现星星打分的完整指南》 在Web开发中，用户评价系统是增强用户体验、收集反馈的重要组成部分。jQuery Raty是一款强大的JavaScript插件，它允许用户通过点击星星来轻松地进行评分，提供了丰富的...
"jQuery 实现星星打分效果"是一种常见的用户评价或评分机制，常用于电商网站、电影评论等场景，让用户以直观的图形方式表达对某一内容的满意度。jQuery 是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画...
本资源提供的是一个适用于网站评论打分的JS星级评分效果，它可以帮助用户直观地展示和选择评价等级，提升用户体验。下面我们将深入探讨这个JS特效的实现原理和关键知识点。 1. **HTML结构**： 在网页中，通常会...
在本文中，我们将深入探讨如何使用纯JavaScript实现一个仿照淘宝星星评分效果的功能。这个功能在电商网站上非常常见，它允许用户通过选择星星数量来给出商品或服务的评价。以下是一些关键知识点： 1. **HTML结构**...
在JavaScript编程中，实现一个等级评分效果，通常指的是创建一种用户界面，允许用户通过点击星星来为某个项目或内容给出评分。这种交互式设计常见于评论系统、产品评价或者在线调查中，它提供了直观且友好的用户体验...
下面将详细讨论如何使用JavaScript实现星星打分效果，以及涉及到的相关技术点。 首先，JavaScript是Web开发中的主要脚本语言，它在浏览器环境中运行，用于处理用户的交互、更新页面内容和创建动态效果。在星星打分...
在这个"js星星打分/评分"项目中，开发者使用了JavaScript、CSS和HTML这三种前端技术来实现这一功能。 JavaScript是一种在客户端运行的编程语言，它在网页交互方面发挥着关键作用。在这个场景下，JavaScript主要用于...
总结来说，jQuery星星评分插件通过结合HTML、CSS和JavaScript实现了用户友好且响应式的评分系统。它不仅提供了美观的视觉反馈，还确保了在不同设备上的兼容性，是网页开发中增强用户体验的一个实用工具。开发者可以...
在JavaScript（简称JS）开发中，滑动星星打分是一种常见的用户交互功能，常用于电商网站的商品评价系统，如淘宝的星星打分。这个功能可以让用户通过滑动鼠标或者触摸屏幕来选择他们对商品的满意度等级，以星星的数量...
在IT行业中，星星打分功能是一种常见的用户反馈或评价机制，尤其在电商、应用市场、电影评分等场景中广泛使用。这种功能允许用户通过点击或滑动星星来给出他们对某个产品或服务的满意度评分，通常以1到5星表示。下面...
Bootstrap图标在移动端应用中常用于增强用户界面的视觉效果，特别是在实现星星评分功能时，它能够提供直观且易于理解的反馈。Bootstrap图标库通常包含了多种预定义的图标，包括星形图标，这些图标设计简洁、响应式且...
以上就是使用JavaScript实现星星评分系统的详细步骤。实际应用中，你可能还需要考虑浏览器兼容性、无障碍性以及性能优化等问题。通过不断实践和学习，你可以创建出更加高效、用户友好的星星评分系统。
星星打分和评分JavaScript特效是网页交互中常见的一种设计，常用于用户对产品或服务进行评价。这种特效可以通过JavaScript库，如jQuery，或者纯JavaScript代码实现。本源码可能提供了一种实现方式，让我们来详细探讨...
"jQuery实现星星评价效果demo"是一个关于如何使用jQuery库来创建一个直观且动态的星级评分系统的实例。这个项目适用于那些希望在网站上添加评论评分功能或者产品评级功能的开发者。 首先，jQuery是一个轻量级的...