上回说到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. sql语句in超过1000时的写法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Java学习——JSTL标签与EL表达式之间的微妙关系

    原文总结的太好了,忍不住记录.转发. 原文地址:http://blog.csdn.net/u010168160/article/details/49182867 目录(?)[-] 一EL表达式 EL相 ...

  3. 7.python实现高效端口扫描器之nmap模块

    对于端口扫描,使用的最多的就是nmap这个工具,不想python已经强大到,提供了nmap这个扫描端口的模块. 本片文章主要介绍nmap模块的两个常用类: PortScanner()类,实现一个nma ...

  4. oracle数据库单表查询

    今天给大家分享的是关于数据库的单表查询,像单表查询/多表查询/分组查询/子查询,这些方法的使用在实际项目过程中会经常用到,作为一名合格的测试人员如果不会数据库那肯定是不行的,行走江湖可能随时会面临被侮 ...

  5. Ref 和out

    out 关键字会导致参数通过引用来传递.这与 ref 关键字类似,不同之处在于 ref 要求变量必须在传递之前进行初始化.若要使用 out 参数,方法定义和调用方法都必须显式使用 out 关键字.例如 ...

  6. Aircrack使用

    Aircrack Aircrack-ng 组件功能之一就是采集WEP及WPA-PSK字典并应用无线端口扫描进行破解,具体组件说明如下: aircrack-ng 功能主要是WEP及WPA-PSK密码的恢 ...

  7. 上课总结-模电chapter 2

    1.无明显失真时电压放大倍数——输出与输入电压的变化量之比 .无明显失真时 电流放大倍数——输出与输入电流的变化量之比 3.最大输出幅度 ①无明显失真时最大输出电压(或最大输出电流) ②交流有效值(U ...

  8. 在libuv中使用openssl建立ssl连接

    在libuv中使用openssl建立ssl连接 @(blogs) 使用openssl进行加密通信时,通常是先建立socket连接,然后使用SSL_XXX系列函数在普通socket之上建立安全连接,然后 ...

  9. 【spring boot】FilterRegistrationBean介绍

    前言 以往的javaee配置过滤器是在web.xml中配置的,如下代码 <filter> <filter-name>TestFilter</filter-name> ...

  10. Win7下C/C++跨平台开发工具IDE的安装之Eclipse-CDT

    2. win7下安装Eclipse-CDT运行C/C++程序: 下载Eclipse-CDT 64位:http://www.eclipse.org/downloads/packages/release/ ...