利用一个星级评分的小案例，来逐步封装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. apache vhosts 虚拟主机设置

    编辑vhosts文件:/alidata/server/httpd-2.4.10/conf/extra/httpd-vhosts.conf <VirtualHost *:80> <Lo ...

  2. Chrome性能分析工具lightHouse用法指南

    本文主要讲如何使用Chrome开发者工具linghtHouse进行页面性能分析. 1.安装插件 非常简单,点击右上角的“添加至Chrome”即可. 2.使用方式 1)打开要测试的页面,点击浏览器右上角 ...

  3. save create

    其中 create 和 create!就等於 new 完就 save 和 save!,有無驚嘆號的差別 在於 validate 資料驗證不正確的動作,無驚嘆號版本會回傳布林值(true 或 false ...

  4. idea生成可执行jar

    1.创建工程 ①使用idea新建一个maven工程. ②编辑工具逻辑代码 ③完成代码的编写后添加工具调用的main方法以接收参数 至此代码编辑过程已经基本完成 ④在maven管理依赖的时候使用idea ...

  5. 【转】数据存储——APP 缓存数据线程安全问题探讨

    http://blog.cnbang.net/tech/3262/ 问题 一般一个 iOS APP 做的事就是:请求数据->保存数据->展示数据,一般用 Sqlite 作为持久存储层,保存 ...

  6. 解决webpack不能匹配post请求的问题

    解决webpack不能匹配post请求的问题 webpack的dev-server只能匹配get请求,在本地做本地数据的时候会很不方便. 可以使用如下两种办法解决: 1.在webpack.config ...

  7. HTML5实现中国象棋游戏

    在线演示 本地下载

  8. 获取HDC的几种方法

    当需要在显示器上(当然包括打印机等设备上)绘图时,或者写文字的时候,需要取得设备的上下文句柄,即HDC,本文以下都称为HDC.那么,有哪些办法取得HDC呢? 1 BeginPain()和EndPain ...

  9. 利用javascript动态向网页中添加表格

    效果图如下: 以下是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  10. 1.2 Data Abstraction（算法 Algorithms 第4版）

    1.2.1 package com.qiusongde; import edu.princeton.cs.algs4.Point2D; import edu.princeton.cs.algs4.St ...