<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>星级评分--封装成jquery插件</title>

</head>

<style type="text/css">

	body,ul,li{

		margin: 0;

		padding: 0;

	}

	li{

		list-style-type: none;

	}

	.rating{

		width: 162px;

		height: 32px;

		margin: 100px auto;

	}

	.rating-item{

		float: left;

		width: 32px;

		height: 32px;

		background: url('./img/rating.png') no-repeat;

		cursor: pointer;

	}

</style>

<body>

<ul class="rating" id="rating">

	<li class="rating-item" title="很不好"></li>

	<li class="rating-item" title="不好"></li>

	<li class="rating-item" title="一般"></li>

	<li class="rating-item" title="好"></li>

	<li class="rating-item" title="很好"></li>

</ul>

</body>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

<script type="text/javascript">

	//封装成jquery插件

	var rating = (function(){

		//点亮星星

		var lightOn = function($item,num){

			$item.each(function(index){

				if(index < num){

					$(this).css('background-position','0 -32px');

				}else{

					$(this).css('background-position','0 0');

				}

			});

		};

		//初始化

		var init = function(el,num){

			var $rating = $('#rating'),

				$item = $rating.find('.rating-item');

			//初始化,点亮num个星星

			lightOn($item,num);		

			$rating.on('mouseover','.rating-item',function(){//鼠标移入时,触发相应操作

				lightOn($item,$(this).index() + 1);

			}).on('click','.rating-item',function(){//鼠标点击时,触发相应操作

				num = $(this).index() + 1;

			}).on('mouseout',function(){//鼠标移出是,触发相应的操作

				lightOn($item,num);

			});

		};

		//jquery插件

		$.fn.extend({

			rating : function(num){

				return this.each(function(){

					init(this,num);

				});

			}

		});

		return {

			init : init

		};

	})();

	$(".rating").rating(3);

</script>

</html>

素材

星级评分--封装成jquery插件的更多相关文章

  1. 如何将Js代码封装成Jquery插件

    很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...

  2. 自己做jQuery插件：将audio5js封装成jQuery语音播放插件

    日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...

  3. 封装第三方jquery插件

    需要自己编写 directives 的情况通常是当你使用了第三方的 jQuery 插件.因为插件在 AngularJS 之外对表单值进行更改,并不能即时反应到 Model 中.例如我们用得比较多的 j ...

  4. 学了一个封装的jquery插件，感觉还成

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

  5. 气球或者泡泡向上飘动 jQuery插件

    圣诞.元旦要来了,公司以往基本每个月至少要搞一两款手机小游戏来宣传产品,这次也不例外!! 之前做过,按压柚子.许愿.吃柚子等等小游戏,这次是做个那种 气球向上飘动,戳破气球,随机获取奖品.如下图: 手 ...

  6. JQuery-- 链式编程、静态函数,自己制作jQuery插件

    一.链式编程 为什么jQuery运行链式编程 ,让我们的代码(方法)连续不间断书写(连续调用)其实主要还是jQuery很多的函数执行完毕之后,都会返回一个jQuery对象 因为获取操作的时候,会返回获 ...

  7. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  8. 我的第一个jquery插件：下拉多选框

    <!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...

  9. 发布一个在Web下输入密码时提示大写锁定键的Jquery插件

    功能介绍:在Web下输入密码时提示大写锁定键,封装成jq插件方便有需要的同学!使用:$("#txtPWD").capsLockTip();截图预览:代码(2012-05-03 10 ...

随机推荐

  1. 【BZOJ4399】魔法少女LJJ 线段树合并

    [BZOJ4399]魔法少女LJJ Description 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女LJJ已经觉得自己见过世界上的所有稀奇古怪的事情了LJJ感叹道“这里真是个迷人的 ...

  2. 【BZOJ4826】[Hnoi2017]影魔 单调栈+扫描线

    [BZOJ4826][Hnoi2017]影魔 Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝 ...

  3. Channel (digital image) 通道 色彩深度 Color_depth

    en.wikipedia.org/wiki/Channel_(digital_image) Color digital images are made of pixels, and pixels ar ...

  4. 【题解】 P5021赛道修建

    [题解]P5021 赛道修建 二分加贪心,轻松拿省一(我没有QAQ) 题干有提示: 输出格式: 输出共一行,包含一个整数,表示长度最小的赛道长度的最大值. 注意到没,最小的最大值,还要多明显? 那么我 ...

  5. 【C语言天天练（十）】结构体

    引言:数据常常以成组的形式存在.在C中,使用结构能够把不同类型的值存放在一起. 结构的声明有两种 1.struct SIMPLE{ int a; char b; float c; };然后用标签SIM ...

  6. 查看物料凭证MB03 /MIGO A04-显示，R02-物料凭证

    当货物移动操作后,可以使用事物码MB03.MIGO查询最近一次生成的物料凭证, 如果未知凭证号,Table:MKPF / AUFM/EKBE MKPF 抬头:物料凭证 KEY: MBLNR 物料凭证编 ...

  7. matlab使用usb和gige 网口相机

    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 辛苦原创所得,转载请注明出处 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ...

  8. 架构设计：系统间通信（34）——被神化的ESB（上）

    1.概述 从本篇文章开始,我们将花一到两篇的篇幅介绍ESB(企业服务总线)技术的基本概念,为读者们理清多个和ESB技术有关名词.我们还将在其中为读者阐述什么情况下应该使用ESB技术.接下来,为了加深读 ...

  9. Spring Boot2.0之纯手写框架

    框架部分重点在于实现原理,懂原理! 废话不多说,动手干起来! SpringMVC程序入口? 没有配置文件,Spring 容器是如何加载? 回顾我们之前搭建Spring Boot项目使用的pom 引入的 ...

  10. 深入理解JVM - Java内存模型与线程 - 第十二章

    Java内存模型 主内存与工作内存 Java内存模型主要目标:定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量(Variable)与Java编程中 ...