上回说到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. Django框架 之 中间件

    Django框架 之 中间件 浏览目录 中间件介绍 自定义中间件 中间件的执行流程 中间件版登录验证 一.中间件介绍 官方的说法:中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个 ...

  2. Python基础 之列表、字典、元组、集合

    基础数据类型汇总 一.列表(list) 例如:删除索引为奇数的元素 lis=[11,22,33,44,55] #第一种: for i in range(len(lis)): if i%2==1: de ...

  3. App测试从入门到精通之App分类和场景操作系统

    App概要 APP是application的缩写.通常指的是手机软件上的应用,或称为手机客户端.手机app就是手机的应用程序.随着智能手机的越发普及,用户越发依赖手机软件商品店,app开发的需求与发展 ...

  4. c# 半角转换为全角 判断是否是全角

    #region 半角转换为全角 /// <summary> /// 半角转换为全角 ////转全角的函数(SBC case) ///任意字符串 ///全角空格为12288,半角空格为32 ...

  5. CSS概念 - 可视化格式模型（二） 定位概述（普通流、绝对定位）

    2.定位概念 上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本 ...

  6. 关于modelsim闪退问题

    电脑之前做过仿真,modelsim是可以完美调用的,但是最近莫名其妙的就出现闪退问题,不通过quartus或者ise调用,单独使用的时候也会闪退. 偶尔一次能抓到错误消息.如下图所示: 然并卵,网上根 ...

  7. Sort函数(C++)

    原创 C++中内置了sor函数供排序,函数原型为: #include<algorithm> //所属头文件 sort(begin,end,cmp); //其中cmp参数可以省略,省略后默认 ...

  8. 原型（Prototype）模式

    一. 原型(Prototype)模式 原型模式的用意是:通过给出一个原型对象来指明所要创建的对象类型,然后用复制这个原型对象的办法创建出更多的同类型对象. 从孙大圣的手段谈起 孙悟空在与黄风怪的战斗中 ...

  9. 【C#】CLR

    CLR是如何工作的 借用维基百科上的一副图来描述CLR的运行流程: 从源代码到应用程序执行CLR主要做了以下工作: 将源代码编译成托管模块 托管模块是一个标准的 32 位 Microsoft Wind ...

  10. owinAuthorize

    Nuget包获取 Install-Package Microsoft.AspNet.WebApi.Owin -Version 5.1.2 Install-Package Microsoft.Owin. ...