利用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. css实现三角形（转）

    css实现三角形 (2012-09-10 14:17:26) 标签: css 三角形 杂谈 分类: 网页制作 css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重 ...

  2. C++读入整行字符串的方法

    string s; getline(cin,s); cout<<s<<endl; ]; scanf("%[^\n]%*c",s); printf(" ...

  3. STM32 C++编程 005 I2c(Soft)类

    使用 C++ 语言给 STM32 编写一个 I2c(Soft)类 我使用的STM32芯片:STM32F103ZET6 我们使用的STM32库版本:V3.5.0 注意: 想学习本套 STM32 C++编 ...

  4. 算法Sedgewick第四版-第1章基础-014一用stack把前置表达式转为后置表达式并计算值

    1. /************************************************************************* * Exercise 1.3.10 * * ...

  5. C语言-郝斌笔记-003数据类型

    基本类型数据 整数 整型     —— int      --4字节  短整型   —— short int   ——2字节 长整型   —— long int    ——8字节      浮点数[实 ...

  6. Java-马士兵设计模式学习笔记-工厂模式-简单工厂

    一.概述 1.目标:要控制任意类型交通工具的生产模式 2.目标有两层意思(1)任意类型 (2)生产模式,所以对应的,要这两个层面上抽象(Movable,VehicleFactory),利用接口,实现多 ...

  7. js实现上传单个文件

    js上传文件:js 上传单个文件(任意大小) 疯狂代码 http://www.CrazyCoder.cn/ :http:/www.CrazyCoder.cn/Javascript/Article832 ...

  8. JavaWeb_反射

    一个类有多个组成部分,例如:成员变量,方法,构造方法等.反射就是加载类,并解剖出类的各个组成部分. 编程时什么情况下才需要加载类,并解剖出累的各个组成部分呢? 反射是用来做框架的. 从配置文件中解读类 ...

  9. MyBatis基本查询、条件查询、查询排序

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  10. Windows 安装 mysql-5.7.12-winx64(CommunityServer) 备忘

    下载后文件名 mysql-5.7.12-winx64.msi 以为还是会和以往一样,一路next傻瓜式安装并完成设置,然后启动运行,但实际情况不是,感觉就是一解压过程,然后点击The MySQL Co ...