上回说到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. xml 操作（动态添加 property属性 其他节点同理）

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

  2. su 和sudo su 的区别

    su "user" 执行该命令,需要输入password,它是"user"中定义的用户的password,即,要变换成的用户的password.(如果已经用ro ...

  3. Robot Framework - 基础关键字 BuiltIn 库（二）

    本篇教程,我们继续接着上篇内容进行讲解,我们本节教程讲解的是Robot Framework 机器人框架中的变量中使用判断.字符串的拼接.Evaluate的用法.调用Python文件.条件分支语句.以及 ...

  4. css总结12：CSS Float(浮动)

    1 定义:CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 2 解释:浮动的元素,浮在界面上,脱离了HTML文本流. 元素的水平方向浮动,意味着元素只能左右移动而不能 ...

  5. （转）关于Update语句的锁

    原文地址:http://www.cnblogs.com/wdfrog/p/3144020.html 环境:MSSQL2005,在Read Committed级别 语句A:begin tranUpdat ...

  6. java实现wc功能

    github项目地址:https://github.com/3216004717/ruanjiangongcheng.git 项目相关要求 基本要求 wc.exe -c file.c //返回文件 f ...

  7. DB2 函数快速构造测试数据

    函数快速构造测试数据 [案例]使用DB2内置函数快速构造测试数据 无论您是在用原型证明某一概念,还是开发一个全新的应用程序,或者只是学习 SQL,您都需要在您的应用程序上运行测试数据.为了有效地测试应 ...

  8. 苹果开发者账号提示“Unable to verify mobile phone number”的解决方案

    在注册苹果开发者账号时,会提示:"Unable to verify mobile phone number.".顾名思义,没有有效的手机号码. 解决方案: 进入到Your Appl ...

  9. 从HDU1004来看C++<map>

    最近做题有点浮躁~于是从HDU第一题开始刷,刷到1004题的时候突发奇想来复习一发很久没有用到过的map 题意是给你n个气球,每个气球有一种颜色,让你求出数量最多的气球颜色 因为颜色是气球数量的识别关 ...

  10. 详说Flask、Django、Pyramid三大主流 Web 框架

    前言 目前随着 Python 在大数据.云计算.人工智能方面的热度,Python Web 应该也会被更多企业了解使用. Python Web 框架千万种,没必要都去了解和学习,身边总有人说高手都用 F ...