利用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. fragment界面交互实操(步骤)

    首先,新建一个继承了fragment类的类,在oncreateview方法中,使用方法的参数inflater,用其inflater.inflate(R.layout.fragment1,contain ...

  2. PAT-l3-002堆栈

    L3-002. 堆栈 大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有“入栈”(将新元素插入栈顶)和“出栈”(将栈顶元素的值返回并从堆栈中将其删除).现请你实现一种特殊的堆栈,它多了一种操作 ...

  3. 利用powerdesigner创建表模型后导出sql语句方法，以及报错 Generation aborted due to errors detected during the verification of the model.的解决办法

    今天用powerdesigner建了表模型,下面先说一下导出sql语句的步骤. 1.选项 2. 然后就报错了,下面说解决办法,很简单. 你没看错,把模型检查的√去掉就行了~~ 导出表名不带双引号的设置 ...

  4. c类库，委托，var ，运算符 is 和 as 。

    类库(Class Library)  格式   .dll  文件 类库   就是类的仓库 c#代码被编译过以后的文件,不可阅读,不可修改,只能调用. 类库是一个综合性的面向对象的可重用类型集合,这些类 ...

  5. 7-n!末尾有几个0

    如何确定一个N!末尾有多少个零 转载 2015年08月30日 15:02:49 622 题目:1*2*3*……*100 求结果末尾有多少个零 分析:一般类似的题目都会蕴含某种规律或简便方法的,阶乘末尾 ...

  6. PCL—点云分割（基于凹凸性） 低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5027269.html 1.图像分割的两条思路 场景分割时机器视觉中的重要任务,尤其对家庭机器人而言,优秀的场景分割 ...

  7. SPOJ LCMSUM - LCM Sum

    题意是求: $\sum_{i = 1}^{n}lcm(i, n)$ $= \sum_{i = 1}^{n}\frac{ni}{gcd(i, n)}$ $= n\sum_{i = 1}^{n}\frac ...

  8. Entity Framework Tutorial Basics（14）：Choose development approach

    Choose development approach with Entity Framework: We have seen Code-first, Model-first and Database ...

  9. struts1和struts2之间的区别

    从action类上分析:1.Struts1要求Action类继承一个抽象基类.Struts1的一个普遍问题是使用抽象类编程而不是接口. 2. Struts 2 Action类可以实现一个Action接 ...

  10. 2015年第六届蓝桥杯省赛试题（JavaA组）

    1.结果填空 (满分3分)2.结果填空 (满分5分)3.结果填空 (满分9分)4.代码填空 (满分11分)5.代码填空 (满分13分)6.结果填空 (满分17分)7.结果填空 (满分21分)8.程序设 ...