js css 星级评分

利用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{
		margin:10px;
		width:16px;
		height: 16px;
		list-style: none;
		display: inline-block;
		background: url(‘http://images.cnblogs.com/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/com/tonnytong/769928/o_star.jpg‘)");
				if((index +1) <= num)
				{
					$this.css("background","url(‘http://images.cnblogs.com/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>

  

粘贴代码

效果如下:

时间: 2024-11-08 03:45:36

js css 星级评分的相关文章

js实现星级评分之方法一

利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>星级评分--第一种实现方式</title> </head> <style type="text/css&quo

js实现星级评分效果(最短代码)

1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时为点击,则离开后还是保持之前的状态. 此demo没有文字信息等提示,可以根据需要自行添加使用. 2. 代码 <!DOCTYPE html> <html> <head> <title>Star Rating</title> <script src="http://apps.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery Raty - 不错的星级评分插件

在做商品评价时,一般情况下,我们需要一个星级评分的组件,而jQuery Raty恰好满足我们的需求. 一.展示 二.使用教程 ①.下载插件 https://github.com/wbotelhos/raty ②.导入文件 <script type="text/javascript" src="${ctx}/components/raty/jquery.raty.js"></script> <link type="text/cs

javascript星级评分(多个)

JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="UTF-8"> <title>javascript星级评分&l

慕课网 星级评分原理和实现(上)

源码下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>星级评分--第一种实现方式</title> <style> body, ul, li { padding: 0; margin: 0; display: block; } li { list-style-type: none; } .r

慕课网上的星级评分--学习视频后模仿实现

1.本人观看了慕课网上的星级评分视频,课程免费,老师讲的特别棒!视频链接:https://www.imooc.com/learn/842 2.在学习完视频后找到了一位大神手敲的代码,在他的Github上下载后,自己手动实现了一遍.源代码稍后贴出原作者的给的链接:http://www.cnblogs.com/fazero/p/8316926.html 3.本人手动模仿实现了一遍代码,学习了好多,再次只贴出最终的可以点亮整颗星与半颗星的javascript代码,如有雷同版权为原作者所有: <scri

星级评分实现

效果图: 图片: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星级评分</title> <style> *{ padding:0; margin: 0; } .rating{ width:140px; height: 26px; margin:100px auto; } .rating-item{ float:lef

ExtJS(3)- 自定义组件(星级评分)

今天介绍ExtJS的组件开发,这里以星级评分为示例,首先来看看效果图: 然后是功能操作:鼠标移动到五个星星上面时,会有tooltip显示当前的分值.如图:鼠标悬停在第四颗星星时前四颗星星显示高亮笑脸,当点击下去时锁定笑脸并且设定份数为4. 然后我们来说一下实现原理,Ext的组件基本单元是Ext.Component,所以自定义组件可以继承Component,然后显示部分直接用html来显示,包括css和动态事件都可以直接在html上编辑添加. 接下来我们来看代码: Ext.define('Pact