JS打多个类型星级评分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>javascript星级评分</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.wrapper
{
height: 20px;
padding: 5px;
width: 130px;
margin: 100px auto 10px;
}
.wra
{
height: 20px;
padding: 5px;
width: 130px;
margin: 100px auto 10px;
}
a
{
float: left;
width: 26px;
height: 20px;
background: url(img/star.png) 0 -20px no-repeat;
}
p
{
font: 24px SimSun;
width: 130px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="a1" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p1">
</p>
<div id="a2" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p2">
</p>
<div id="a3" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p3">
</p>
<div id="a4" class="wrapper">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<a href="javascript:;"></a><a href="javascript:;"></a>
</div>
<p id="p4">
</p>
</body>
</html>
<script type="text/javascript">
$(function () {
var objs = $(".wrapper a");
$(objs).mouseover(function () {
var ix = $(this).index();
sets(ix, this);
}); $(objs).mouseout(function () {
var ix = $(this).parent().attr("rel");
if (ix == undefined)
ix = -1;
sets(ix, this);
}); $(objs).click(function () {
var ix = $(this).index();
$(this).parent().next("p").html((ix + 1) + ' 颗星');
$(this).parent().attr("rel", ix);
sets(ix, this);
});
});
function sets(ix, obj) {
$(obj).parent().children().each(function (ik) {
if (ik <= ix) {
$(this).css("backgroundPosition", '0 0');
} else {
$(this).css("backgroundPosition", '0 -20px');
}
});
}
</script>

单个星级评分(纯JS):

<script type="text/javascript">
window.onload = function () {
var star = document.getElementById('a1').getElementsByTagName('a'); var temp = 0; for (var i = 0, len = star.length; i < len; i++) {
star[i].index = i; star[i].onmouseover = function () {
clear();
for (var j = 0; j < this.index + 1; j++) {
star[j].style.backgroundPosition = '0 0';
}
} star[i].onmouseout = function () {
for (var j = 0; j < this.index + 1; j++) {
star[j].style.backgroundPosition = '0 -20px';
}
current(temp);
} star[i].onclick = function () {
temp = this.index + 1;
document.getElementById('p1').innerHTML = temp + ' 颗星';
current(temp);
}
}
//清除所有
function clear() {
for (var i = 0, len = star.length; i < len; i++) {
star[i].style.backgroundPosition = '0 -20px';
}
}
//显示当前第几颗星
function current(temp) {
for (var i = 0; i < temp; i++) {
star[i].style.backgroundPosition = '0 0';
}
}
};
</script>

图片

javascript星级评分(多个)的更多相关文章

  1. JavaScript星级评分

    事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  2. JavaScript星级评分,仿百度,增强版

    JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. 原生javascript星级评分

    写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...

  4. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js实现星级评分效果(非常规5个li代码)

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  7. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  8. js css 点亮 星级评分

    利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. 数组练习:各种数组方法的使用&&事件练习:封装兼容性添加、删除事件的函数&&星级评分系统

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 高级查询---嵌套and分页

    高级嵌套语句: 子查询: 语句: select * from 表名 where 列名= ( 子查询语句 ) 注意:子查询语句必须放在小括号呢 可以使用< >=等运算符号,sql serve ...

  2. http status 301/302 & java重定向/转发

    一.301/3021.什么是301转向?什么是301重定向? 301转向(或叫301重定向,301跳转)是当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header) ...

  3. [LeetCode] Minimum Number of Arrows to Burst Balloons 最少数量的箭引爆气球

    There are a number of spherical balloons spread in two-dimensional space. For each balloon, provided ...

  4. Java序列化与反序列化

    Java序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化?本文围绕这些问题进行了探讨. 1.Java序列化与反序列化 Java序列化是指把Java对象转换为字节序列 ...

  5. autofac与unity注册类型的几个小区别

    //以下两个注册,在Unity中是默认的 //注册控制器,否则不管接口注入还是属性注入都获取不到服务实例 Builder.RegisterControllers(typeof(MvcApplicati ...

  6. Spring_跨项目读取properties文件

    应用背景:工程中有40~50个项目,分为4个模块,分别是核心模块.服务接口模块.服务实现模块.Web模块.其它模块(包括消息队列.quartz任务等).工程中很多配置项都是多个项目共有调用的,所以单独 ...

  7. 使用 win+r 命令行打开我们的桌面应用(处女座的福音)

    首先新建一个文件夹,名为quickapp,然后在地址栏复制文件目录地址,进入系统高级设置,修改系统环境变量Path,双击后选择新建,输入quickapp文件目录地址,确认保存. 如何修改path变量? ...

  8. POJ 1815 Friendship

    Friendship Time Limit: 2000MS   Memory Limit: 20000K Total Submissions: 10626   Accepted: 2949 Descr ...

  9. OI省选算法汇总

    copy from hzwer @http://hzwer.com/1234.html 侵删 1.1 基本数据结构 1. 数组 2. 链表,双向链表 3. 队列,单调队列,双端队列 4. 栈,单调栈 ...

  10. iOS 组件化漫谈

    1.准备工作 由于工程越来越大,里面的文件也越来越多.很多时候merge代码的时候工程文件起了冲突之后,若 .xcodeproj文件冲突 打开之后很难以修改. 架构其实相对开发来说还是比较难于下手的东 ...