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/ ...
随机推荐
- 九度OJ 1041：Simple Sorting（简单排序） （排序）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4502 解决:1680 题目描述: You are given an unsorted array of integer numbers. ...
- 九度OJ 1034：寻找大富翁 （排序）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5925 解决:2375 题目描述: 浙江桐乡乌镇共有n个人,请找出该镇上的前m个大富翁. 输入: 输入包含多组测试用例. ...
- 镜像回源主要用于无缝迁移数据到OSS，即服务已经在自己建立的源站或者在其他云产品上运行，需要迁移到OSS上，但是又不能停止服务，此时可利用镜像回写功能实现。
管理回源设置_管理文件_开发指南_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/31865.html 通过回源设置,对于获取数据的请求以多种 ...
- SD相关的表
[转] 一.客户主数据基本数据放在KNA1里:公司代码放在KNB1里:销售视图放在KNVV里:合作伙伴放在KNVP里:二.信用主数据KNKK里有信贷限额.应收总额.特别往来:S066里是未清订单值:S ...
- swift中反向循环
First of all, protocol extensions change how reverse is used: for i in (1...5).reverse() { print(i) ...
- .gitignore文件配置：keil工程文件类型【转】
本文转载自:https://blog.csdn.net/u010160335/article/details/80043965 .gitignore源文件下载链接:git管理keil工程.gitign ...
- RK平台images打包细则【转】
本文转载自;https://blog.csdn.net/wangxueming/article/details/52808739 IMGs打包细节 平台: RK3288 背景: RK3288编译产生了 ...
- python中的编码转换
今天遇到了一个问题,将字符串“\uxxxx\uxxxx”转换成汉字.网上查了很多资料都不行. 后来看到,发现一个函数就OK了. str = str.decode('unicode_escape') 等 ...
- hihocoder #1152 Lucky Substrings 【字符串处理问题】strsub()函数+set集合去重
#1152 : Lucky Substrings时间限制:10000ms单点时限:1000ms内存限制:256MB描述A string s is LUCKY if and only if the nu ...
- java调用shell命令及脚本
shell脚本在处理文本及管理操作系统时强大且简单,将shell脚本结合到应用程序中则是一种快速实现的不错途径本文介绍使用java代码调用并执行shell 我在 -/bin/ 目录下写了jbossLo ...