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. [No000092]SVN学习笔记3-Import/Checkout(迁入/迁出),GetLock(加锁)

    一.TortoiseSVN Client 获取服务器端的文件到新的本地文件夹 1.在本地新文件夹上右键菜单: 2.打开Repo-browser(可能需要输入你的用户名&密码) 3.输入服务器端 ...

  2. Hangfire入门（任务调度）

    一.简介 英文官网:http://hangfire.io/ 开源地址:https://github.com/HangfireIO Hangfire 不依赖于具体的.NET应用类型,包含.NET 和.N ...

  3. linux查看主板型号及内存硬件信息

      公司服务器内存不够用了. 想看看买啥型号的. 购买内存条注意点: ddr3 or4 频率 块钱. 内存槽及内存条: dmidecode |grep -A16 "Memory Device ...

  4. volley用法之 以post方式发送 json 参数

    需求是这样 我们需要发送一个post请求向服务器要参数.要求是发送的post参数也要是json格式. 简单一点的是这样的: 如果要发送的是这样简单的json格式,我们可以简单的使用map来实现: Re ...

  5. Web Deploy自动配置

    自动发布配置,需要在发布的配置文件里面添加以下一句,避免在发布时,无权限! <Project ToolsVersion="4.0" xmlns="http://sc ...

  6. Markdown

    1. 斜体和粗体 代码: *斜体*或_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ 显示效果: 这是一段斜体 这是一段粗体 这是一段加粗斜体 这是一段删除线 2. 分级标题 第一种写法: ...

  7. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  8. Java多线程与并发库高级应用-面试题

    第一题:现有的程序代码模拟产生了16个日志对象,并且需要运行16秒才能打印完这些日志,请在程序中增加4个线程去调用parseLog()方法来分头打印这16个日志对象,程序只需要运行4秒即可打印完这些日 ...

  9. iOS 开发总结（上）

    来源:蝴蝶之梦天使 链接:http://www.jianshu.com/p/d333cf6ae4b0 在iOS开发中经常需要使用的或不常用的知识点的总结,几年的收藏和积累(踩过的坑). 一. iPho ...

  10. bzoj1415[NOI2005]聪聪和可可

    之前做的一些图上的期望步数的题大多用到高斯消元来求解(HNOI游走,SDOI走迷宫,etc),因此我一开始做这道题的时候想偏了- 这道题的性质:聪聪和可可之间的最短路长度严格递减.因为聪聪总可以多走一 ...