js实现星级评分之方法一
利用一个星级评分的小案例，来逐步封装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实现星级评分之方法一的更多相关文章
- js实现星级评分效果（非常规5个li代码）
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
- js 实现星级评分
最近的项目中有一个星级评分的需求, 自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里. js要用到jquery. css: .sr-star{ ...
- 原生JS实现-星级评分系统
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...
- JS实现星级评分
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js判断IE6（推荐方法一）
不得不使用判断的方法 //方法1:推荐 if ( /MSIE 6/.test(navigator.userAgent)){ } //方法2: if ( navigator.appVersion.ind ...
- js css 点亮 星级评分
利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 原生javascript星级评分
写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...
- js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- cocos2d-js添加道有道插屏（通过jsb反射机制）
1.导入jar包 2.修改AndroidManifest.xml文件 添加权限: <activity android:configChanges="keyboard|keyb ...
- 详解Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 性能测试--测试流程、APDEX、linux性能知识
测试流程.APDEX.linux性能知识 一.性能测试流程: 整体流程:收集需求-->搭建测试环境-->设计性能测试场景-->开发测试脚本-->执行测试-->收集数据-- ...
- 我的Android进阶之旅------>Android利用Sensor(传感器)实现水平仪功能的小例
这里介绍的水平仪,指的是比较传统的气泡水平仪,在一个透明圆盘内充满液体,液体中留有一个气泡,当一端翘起时,该气泡就会浮向翘起的一端. 利用方向传感器返回的第一个参数,实现了一个指南针小应用. 我 ...
- Docker实践中遇到的坑
1.docker容器中后台运行退出执行curl+p+q,再次进入执行命令docker attach 容器id. 2.容器中exit退出后,还原方法为docker ps -a 查看历史运行容器,dock ...
- Scipy.sparse矩阵的存储，读取和转化为稠密矩阵
import numpy as np import scipy.sparse as sp m = sp.lil_matrix((7329,7329)) np.save(path,m) #用numpy的 ...
- UVA - 10305 【全排列】
题意 要求给出一组 包含 1 - N 的数字的序列 要求这个序列 满足 题给的限制条件 比如 1 2 就是 1 一定要在 2 前面 思路 因为 数据规模较小 可以用 全排列 然后判断每个序列 是否满足 ...
- TP框架控制器和对应方法创建
控制器和对应方法创建 控制器是MVC模式中的核心,TP默认有一个控制器: Index控制器里面有一个操作方法:Index 我们在访问http://localhost:8080/Thinkphp ...
- PHP相关安全配置【转】
PHP是广泛使用的开源服务端脚本语言.通过HTTP或HTTPS协议,Apache Web服务允许用户访问文件或内容.服务端脚本语言的错误配置会导致各种问题.因此,PHP应该小心使用.以下是为系统管理员 ...
- html5--1.19 通用属性
html5--1.19 通用属性 学习要点: 1.通用属性的概念及几个常用的通用属性2.对属性值的若干点补充 通用属性 通用属性(全局属性)可以用于任何的HTML5元素:通用属性有十几种:这节课不会全 ...