利用css 和 js 实现星级评分

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>rating</title>

</head>

<style >

	*{margin:0;padding: 0}

	ul{width:500px; padding:100px;padding:0 auto;}

	li{

		width:16px;

		height: 16px;

		list-style: none;

		display: inline-block;

		background: url('http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_star.jpg') no-repeat;

	}

</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>

</html>

<script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script>

<script type="text/javascript">

	$(function(){

		var ratingWrap = $("#rating")

			, ratingItem = $(".rating-item",ratingWrap)

			, num = 2;

		var lightOn = function(num){

			ratingItem.each(function(index){

				var $this = $(this);

				$this.css("background","url('http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_star.jpg')");

				if((index +1) <= num)

				{

					$this.css("background","url('http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_on.jpg')");

				}

			})

		}

		lightOn(num);

		$(".rating-item").on("mouseover",function(){

			var $this = $(this);

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

		}).on("click",function(){

			var $this = $(this);

			num = $this.index()+1;

		}).on("mouseout",function(){

			lightOn(num);

		})

	})

</script>

　　

粘贴代码

效果如下：

js css 点亮 星级评分的更多相关文章

  1. js css div 点亮半颗星星（二）

    上回说到js css点亮星星 换种方式来点亮 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. js 实现星级评分

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

  3. js实现星级评分之方法一

    利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...

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

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

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

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

  6. js点亮星星评分并获取参数的js代码

    点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...

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

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

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

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

  9. 用css制作星级评分

    Step 1: XHTML <ul class="star-rating">       <li><a href="#" titl ...

随机推荐

  1. [cf557d]Vitaly and Cycle(黑白染色求奇环)

    题目大意:给出一个 n 点 m 边的图,问最少加多少边使其能够存在奇环,加最少边的情况数有多少种. 解题关键:黑白染色求奇环,利用数量分析求解. 奇环:含有奇数个点的环. 二分图不存在奇环.反之亦成立 ...

  2. JSON数据格式简介

    ---------------siwuxie095                         JSON 简介     JSON:JavaScript 对象表示法(JavaScript Objec ...

  3. vray学习笔记(3)-多维子材质是个什么东西

    多维子材质是个什么东西?为什么出现这个概念? 在3dsmax官方网站,我们可以看到它的定义: The Multi/Sub-Object material lets you assign differe ...

  4. 内核文件ntoskrnl.exe,ntkrnlpa.exe的区别？？

    除了标题中说到的两个exe文件之外,还有另外两个ntkrnlmp.exe和ntkrpamp.exe.因为我目前用到的只是标题中的两个. 其中,我在网上搜索到的关于SSDT HOOK 的资料,举的例子, ...

  5. noi.ac day6t1 queen

    传送门 分析 我就是个BT...... 直接排序后开数组记录每条线上的信息,注意由于每个点只会影响前面第一个点和后面第一个点,所以记录每条线的前一个点就行了. 代码 #include<iostr ...

  6. spoj14846 Bribe the Prisoners

    看来我还是太菜了,这么一道破题做了那么长时间...... 传送门 分析 我首先想到的是用状压dp来转移每一个人是否放走的状态,但是发现复杂度远远不够.于是我们考虑区间dp,dpij表示i到j区间的所有 ...

  7. linux设备驱动第四篇：驱动调试方法

    http://www.cnblogs.com/donghuizaixian/archive/2015/04/02/4387083.html 上一篇我们大概聊了如何写一个简单的字符设备驱动,我们不是神, ...

  8. Linux 终端命令行提示符的艺术--PS1进阶

    话不多说,先瞅瞅我的命令行提示符(有点大): 图中命令行解释:┌[阳历日期/农历日期 时间]├[当前目录下目录数+当前目录下文件数][当前绝对目录]└[用户名@主机名-第几个终端 ╰_╯] 相关配置文 ...

  9. Person的delete请求--------详细过程

    首先,数据库的增删改查都是在PersonRepository中实现,因此,直接进入PersonRepository,找到其父类,搜索delete. @Override @TransactionalMe ...

  10. HUST高级软件工程--测试管理工具实践--Day1

    测试管理工具实践--Day1 今天完成任务情况: 课前组好队伍,建好微信群. 课上通过老师的介绍,初步了解各种测试工具的使用情况. 课后选取了组长,在微信群经过"广泛而激烈"的讨论 ...