上回说到js css点亮星星 换种方式来点亮

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>rating</title>

</head>

<style >

	*{margin:0;padding: 0}

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

</style>

<body>

	<div class="rating" id="rating">

		<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="很差">

		<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="差">

		<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="一般">

		<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="好">

		<img class="rating-item" src="http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png" alt="" title="极好">

	</div>

</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 ratingFunc = function(elWrap,options){

			this._opts = {

				num:1

			};

			this._opts = $.extend(this._opts,options);

			this._el = $(elWrap);

			this._ratingItems = this._el.find(".rating-item");

			this._lightOn(this._opts.num);

			this._bindEvent();

		};

		$.extend(ratingFunc.prototype,{

			_lightOn: function(num){

                var that = this;

				that._ratingItems.each(function(index){

					var $this = $(this)

						, intNum = parseInt(num);

					$this.attr("src","http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_off.png");

					if((index +1) <=num)

					{

						$this.attr("src","http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_on.png");

						if(intNum != num){

							if(index +1 == intNum){

								$this.attr("src","http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_half-on.png");

							}

						}

					}

				})

			},

			_calculateNum: function(obj,eventObj)

			{

                var that = this;

				var imgWith = obj.width()

		 			, offset = obj.offset();

				if((eventObj.pageX-offset.left) < (0.5*imgWith)){

					that._opts.num = obj.index()+1+0.5;

				}else{

					that._opts.num = obj.index()+1;

				}

			},

			_bindEvent: function(){

                var that = this;

				that._ratingItems.on("click",function(e){

					that._calculateNum($(this),e);

					that._lightOn(that._opts.num);

				}).on("mousemove",function(e){

					that._calculateNum($(this),e);

					that._lightOn(that._opts.num);

				})

			}

		})

	    $.ratingFunc = function(el,options){

	        return new ratingFunc(el,options);

	    };

	})(jQuery);

	$.ratingFunc("#rating",{num:3.5});

</script>

　　

粘贴代码

js css div 点亮半颗星星（二）的更多相关文章

  1. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. 进阶篇之纯css+字体实现五角星（半颗星）评分

    1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...

  4. css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）

    1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...

  5. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  6. js 控制Div循环显示 非插件版

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

  7. 勤能补挫-简单But易错的JS&CSS问题总结

    错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...

  8. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

随机推荐

  1. 第七课 ROS的空间描述和变换

    在命令行工具中也有一个与transformcaster相类似的工具叫做static_transform_publisher,它能够接受命令行参数来接受位置信息.旋转信息.父框架.子框架以及周期信息,通 ...

  2. 编写高质量代码改善C#程序的157个建议——建议51：具有可释放字段的类型或拥有本机资源的类型应该是可释放的

    建议51:具有可释放字段的类型或拥有本机资源的类型应该是可释放的 在建议50中,我们将C#中的类型分为:普通类型和继承了IDisposable接口的非普通类型.非普通类型除了包含那些托管资源的类型外, ...

  3. 表单使用clone方法后, 原有select无法生效

    textarea和select的值clone的时候会丢掉,在clone的时候将val再重新赋值一下,如果知道这个了就加单了   测试发现,textarea和select的jquery的clone方法有 ...

  4. 微软日志工厂 Microsoft.Extensions.Logging 中增加 log4net 的日志输出

    前提: 需要nuget   Microsoft.Extensions.Logging.Log4Net.AspNetCore   2.2.6: 描述:解决 .net core 微软日志工厂 Micros ...

  5. 为什么 kubernetes 天然适合微服务 (1)

    此文已由作者刘超授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 最近总在思考,为什么在支撑容器平台和微服务的竞争中,Kubernetes 会取得最终的胜出,事实上从很多角度出发 ...

  6. 「BZOJ 2152」聪聪可可

    题目链接 戳这 \(Solution\) 这道题看起来就像点分治对吧.没错就是点分治. 什么是点分治 如果你不会点分治,可以去看看这儿 现在看到这里,首先确保你已经会了点分治,如果不会你还往下看,听不 ...

  7. 解决JAR包里面打开源代码都是乱码

    下面是解决方案 通过eclipse浏览源代码时,发现中文注释为乱码的问题.其实这个eclipse默认编码造成的问题.可以通过以下方法解决: 修改Eclipse中文本文件的默认编码:windows-&g ...

  8. oracle转义用单引号

    参考:https://blog.csdn.net/learning_oracle_lh/article/details/46639507

  9. 关于DataGridView的ClearSelection方法

    最近做winform项目,遇到一个问题.  纠结了几天,最终解决了,记录一下! 新建一个Form窗体,拽一个DataGridView上去,然后写一个方法 private void BindData() ...

  10. python 时间相关函数

    python 中与时间处理相关的模块包括 time.datetime.以及 calendar time 模块 time() 函数:time() 函数用于返回当前时间的时间戳(1970年01月08时00 ...