利用一个星级评分的小案例，来逐步封装js星级评分插件。

从最基础的js知识，通过一个小的demo，逐步学习js的面向对象知识。

从浅到深，逐步递进。

图片素材

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>星级评分--第一种实现方式</title>

</head>

<style type="text/css">

    body,ul,li{

        margin: 0;

        padding: 0;

    }

    li{

        list-style-type: none;

    }

    .rating{

        width: 162px;

        height: 32px;

        margin: 100px auto;

    }

    .rating-item{

        float: left;

        width: 32px;

        height: 32px;

        background: url('./img/rating.png') no-repeat;

        cursor: pointer;

    }

</style>

<body>

<ul class="rating" id="rating">

    <li class="rating-item" title="很不好"></li>

    <li class="rating-item" title="不好"></li>

    <li class="rating-item" title="一般"></li>

    <li class="rating-item" title="好"></li>

    <li class="rating-item" title="很好"></li>

</ul>

</body>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

<script type="text/javascript">

    var num = 2,

        $rating = $('#rating'),

        $item = $rating.find('.rating-item');

    //点亮星星

    var lightOn = function(num){

        $item.each(function(){

            if($(this).index() < num){

                $(this).css('background-position','0 -32px');

            }else{

                $(this).css('background-position','0 0');

            }

        });

    }

    //初始化,点亮num个星星

    lightOn(num);

    $item.on('mouseover',function(){//鼠标移入时,触发相应操作

        lightOn($(this).index() + 1);

    }).on('click',function(){//鼠标点击时,触发相应操作

        num = $(this).index() + 1;

    });

    //鼠标移出是,触发相应的操作

    $rating.on('mouseout',function(){

        lightOn(num);

    });

</script>

</html>

js实现星级评分之方法一的更多相关文章

  1. js实现星级评分效果（非常规5个li代码）

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

  2. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  3. 原生JS实现-星级评分系统

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...

  4. JS实现星级评分

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. js判断IE6（推荐方法一）

    不得不使用判断的方法 //方法1:推荐 if ( /MSIE 6/.test(navigator.userAgent)){ } //方法2: if ( navigator.appVersion.ind ...

  6. js css 点亮 星级评分

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

  7. 原生javascript星级评分

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

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

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

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

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

随机推荐

  1. 【BZOJ2989】数列 kd-tree

    [BZOJ2989]数列 Description 给定一个长度为n的正整数数列a[i]. 定义2个位置的graze值为两者位置差与数值差的和,即graze(x,y)=|x-y|+|a[x]-a[y]| ...

  2. bmdiff snappy lzw gzip

    https://github.com/google/snappy Introduction [速度第一,压缩比适宜] [favors speed over compression ratio] Sna ...

  3. cocos2d-js添加艾盟插屏（通过jsb反射机制）

    1.导入jar包 2.修改AndroidManifest.xml文件 添加:         <activity            android:name="com.xingka ...

  4. VC里OnPaint几点要注意的地方（没有invalidate，系统认为窗口没有更新的必要，于是就对发来的WM_PAINT消息不理不睬）

    写在属于自己的体会,哪怕只是一点点,也是真的懂了.否则有那么多书,如果只是不过脑子的学一遍看一遍,又有谁真的掌握了这些知识呢? 这样你或许就明白了为什么不能直接用SendMessage和PostMes ...

  5. Gemini.Workflow 双子工作流入门教程五：业务表单开发

    简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:业务表单开发. 业务表单开发 业务表单的开发,和在 ...

  6. WebsiteCrawler

    看到网上不少py的爬虫功能极强大,可惜对py了解的不多,以前尝试过使用c# WebHttpRequert类来读取网站的html页面源码,然后通过正则表达式筛选出想要的结果,但现在的网站中,多数使用js ...

  7. Java基础：hashCode与equals个人学习记录

    摘要: 本文主要记录本人对hashCode和对equals两个知识点的学习过程. 从学生时期初学java,就知道hashCode和equals这两个方法,工作中equals方法使用也是特别频繁,要说e ...

  8. linux下安装svn服务

    环境centos6.8 64位: 1.安装svn yum install subversion yum install mod_dav_svn 2.创建svn仓库 mkdie /home/svn 3. ...

  9. 三年java软件工程师应有的技技能

    摘要:http://blog.csdn.net/jieinasiainfo/article/details/51177729 http://blog.csdn.net/kangqianglong/ar ...

  10. python基础-正则1

    什么是正则表达式? 正则表达式是一种小型的\高度专业化的变成语言,主要用于字符串处理 正则表达式是一种通用语言,在python中通过re模块实现,import re 工具:在线正则表达式测试 http ...