利用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. HTML5 学习指导

    HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素.确保你可以从它丰富的词汇中获益. <!-- bad --> <div id="main"&g ...

  2. 【总结整理】WebGIS学习-thinkGIS（地理常识）：

    ##地图知识 ###地图定义 地图是按照一定的法则,有选择地以二维或多维形式与手段在平面或球面上表示地球(或其它星球)若干现象的图形或图像,它具有严格的数学基础.符号系统.文字注记,并能用地图概括原则 ...

  3. SpringBoot11 读取properties文件、发送邮件

    1 读取properties文件 1.1 ResourceBundle 帮助我们事先国际化 1.1.1 前提 properties文件的命名方式必须体现除语言和国别 例如:test_zh_CN.pro ...

  4. Tensorflow递归神经网络学习练习

    import tensorflow as tffrom tensorflow.examples.tutorials.mnist import input_data #载入数据集mnist = inpu ...

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

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

  6. ZROI2018普转提day2t2

    传送门 分析 我们发现2R+C实际就相当于R行C列的子集的个数.因此我们可以将所有集合的子集个数转换为每个集合属于的集合的个数.所以我们可以求出: 这个式子的意义为对于选i行j列的情况的所有方案乘上i ...

  7. Entity Framework Tutorial Basics（35）：Local Data

    Local Data The Local property of DBSet provides simple access to the entities that are currently bei ...

  8. LVM扩展学习日志

    lvm是逻辑卷管理的简称,它将一个或多个物理硬盘分区(PV)组成一个逻辑硬盘(VG)来使用,  然后从这个VG中划分出逻辑分区(LV), 以上概念是我理解的东西,可能和书上的不一样. 以下所有命令都是 ...

  9. [译]Javascript中的switch语句

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  10. linux linux系统的安装及使用

    linux  linux系统的安装及使用 一.linux系统中安装vm-tools工具: 步骤: 1.在vmware workstation软件中:虚拟机-安装vmware-tools-状态栏会提示- ...