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/ ...
随机推荐
- 【BZOJ1853/2393】[Scoi2010]幸运数字/Cirno的完美算数教室 DFS+容斥
[BZOJ1853][Scoi2010]幸运数字 Description 在中国,很多人都把6和8视为是幸运数字!lxhgww也这样认为,于是他定义自己的“幸运号码”是十进制表示中只包含数字6和8的那 ...
- EasyDSS RTMP流媒体解决方案之直播录像自动清理方案
本文转自Marvin的博客: http://blog.csdn.net/marvin1311/article/details/78660592 EasyDSS_Solution直播录像清理 直播录像, ...
- samba服务器的搭建和配置
案例: 公司有两个部门, sales / market . 分别有成员 jack / tom 和 zhang / shen . 公司需求是这样的, 本部门资料禁止其他部门访问, 本部门成员之间不能干扰 ...
- LeetCode——Binary Tree Postorder Traversal
Given a binary tree, return the postorder traversal of its nodes' values. For example: Given binary ...
- Java基础教程：多线程基础（4）——Lock的使用
Java基础教程:多线程基础(4)——Lock的使用 快速开始 Java 5中Lock对象的也能实现同步的效果,而且在使用上更加方便. 本节重点的2个知识点是:ReentrantLock类的使用和Re ...
- POJ - 2031 Building a Space Station 【PRIME】
题目链接 http://poj.org/problem?id=2031 题意 给出N个球形的 个体 如果 两个个体 相互接触 或者 包含 那么 这两个个体之间就能够互相通达 现在给出若干个这样的个体 ...
- 7-4 汉密尔顿回路（25 分） 【STL】
7-4 汉密尔顿回路(25 分) 著名的"汉密尔顿(Hamilton)回路问题"是要找一个能遍历图中所有顶点的简单回路(即每个顶点只访问 1 次).本题就要求你判断任一给定的回路是 ...
- GCC的-wl,-rpath=参数
使用GCC编译动态链接库的项目时,在其他目录下执行很可以出现找不到动态链接库的问题. 这种情况多发生在动态链接库是自己开发的情况下,原因就是程序运行时找不到去何处加载动态链接库. 可能会说在编译时指定 ...
- 《C prime plus (第五版）》 ---第11章 字符串和字符串函数
11-1:字符串表示和字符串I/O 1.首先先通过一个整体的例子来初步了解建立,读入和输出字符串的几种方式. #include<stdio.h> #define MSG "你一定 ...
- 大数据之路- Hadoop环境搭建（Linux）
前期部署 1.JDK 2.上传HADOOP安装包 2.1官网:http://hadoop.apache.org/ 2.2下载hadoop-2.6.1的这个tar.gz文件,官网: https://ar ...