上回说到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. html页面的局部刷新

    有时候我们在做一个动态/静态网页,网页中的某部分需要从服务器获取值但是不能把整个页面都提交到服务器,也就是要对页面做局部刷新,也就是对整个网页无刷新更新值.在这种情况下就需要用JS和XMLHttpRe ...

  2. poj 1988 Cube Stacking （并查集）

    题意:有N(N<=30,000)堆方块,开始每堆都是一个方块.方块编号1 – N. 有两种操作: M x y : 表示把方块x所在的堆,拿起来叠放到y所在的堆上. C x : 问方块x下面有多少 ...

  3. hdu 1556 Color the ball （线段树做法）

    Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的“小飞鸽"牌电动车从气球a ...

  4. [转]FreeMarker使用

    copy自http://demojava.iteye.com/blog/800204 以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主 ...

  5. JQuery中一些常用函数的运用

    一.JQuery的效果介绍 二.定时弹出广告图片JQ部分代码 <script type="text/javascript"> var time; $(function( ...

  6. TSQL--时间类型和毫秒数转换

    项目中使用BIGINT来存放时间,以下代码用来转换时间类型和BIGINT类型 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ========= ...

  7. C# socket请求的名称有效 但是找不到请求的类型的数据

    程序以前在xp下运行一直良好,但将安装在win7下面却出现"请求的名称有效 但是找不到请求的类型的数据"错误,程序底层通信是基于socket,时间久了就会出现系统黑屏死机,但并不知 ...

  8. c#递归理解

    什么是递归函数? 任何一个方法既可以调用其他方法又可以调用自己,而当这个方法调用自己时,我们就叫它递归函数或者递归方法! 说白了,就是调用自己. 通常递归有两个特点:     1.递归方法一直会调用自 ...

  9. chkconfig的原理 和添加开机自启动的办法

    当我们使用 chkconfig --list的时候 都会又  123456 这样的级别. 当某个级别是 on 他就会开机启动,当他是off 的时候他就不会开机自启动. 那么这是什么原因呢?他的 原理是 ...

  10. OC 术语表

    术语表 本附录包含了很多会用到的非正式定义术语.有些术语与Obective-C语言有关,其他术语则有自己的语源,来自面向对象程序设计的规范.在后一种情况中,术语的含义只有明确应用于Obective-C ...