1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>星级评分--封装成jquery插件</title>
  6. </head>
  7. <style type="text/css">
  8. 	body,ul,li{
  9. 		margin: 0;
  10. 		padding: 0;
  11. 	}
  12. 	li{
  13. 		list-style-type: none;
  14. 	}
  15. 	.rating{
  16. 		width: 162px;
  17. 		height: 32px;
  18. 		margin: 100px auto;
  19. 	}
  20. 	.rating-item{
  21. 		float: left;
  22. 		width: 32px;
  23. 		height: 32px;
  24. 		background: url('./img/rating.png') no-repeat;
  25. 		cursor: pointer;
  26. 	}
  27. </style>
  28. <body>
  29. <ul class="rating" id="rating">
  30. 	<li class="rating-item" title="很不好"></li>
  31. 	<li class="rating-item" title="不好"></li>
  32. 	<li class="rating-item" title="一般"></li>
  33. 	<li class="rating-item" title="好"></li>
  34. 	<li class="rating-item" title="很好"></li>
  35. </ul>
  36. </body>
  37. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  38. <script type="text/javascript">
  39. 	//封装成jquery插件
  40. 	var rating = (function(){
  41. 		//点亮星星
  42. 		var lightOn = function($item,num){
  43. 			$item.each(function(index){
  44. 				if(index < num){
  45. 					$(this).css('background-position','0 -32px');
  46. 				}else{
  47. 					$(this).css('background-position','0 0');
  48. 				}
  49. 			});
  50. 		};
  51.  
  52. 		//初始化
  53. 		var init = function(el,num){
  54. 			var $rating = $('#rating'),
  55. 				$item = $rating.find('.rating-item');
  56.  
  57. 			//初始化,点亮num个星星
  58. 			lightOn($item,num);		
  59.  
  60. 			$rating.on('mouseover','.rating-item',function(){//鼠标移入时,触发相应操作
  61. 				lightOn($item,$(this).index() + 1);
  62. 			}).on('click','.rating-item',function(){//鼠标点击时,触发相应操作
  63. 				num = $(this).index() + 1;
  64. 			}).on('mouseout',function(){//鼠标移出是,触发相应的操作
  65. 				lightOn($item,num);
  66. 			});
  67. 		};
  68.  
  69. 		//jquery插件
  70. 		$.fn.extend({
  71. 			rating : function(num){
  72. 				return this.each(function(){
  73. 					init(this,num);
  74. 				});
  75. 			}
  76. 		});
  77.  
  78. 		return {
  79. 			init : init
  80. 		};
  81. 	})();
  82. 	$(".rating").rating(3);
  83. </script>
  84. </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. springcloud微服务实战--笔记

    目前对Springcloud对了解仅限于:“用[注册服务.配置服务]来统一管理其他微服务” 这个水平.有待提高 Springcloud微服务实战这本书是翟永超2017年5月写的,时间已经过去了两年,略 ...

  2. 九度OJ 1178：复数集合 （插入排序）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:8393 解决:1551 题目描述: 一个复数(x+iy)集合,两种操作作用在该集合上: 1.Pop 表示读出集合中复数模值最大的那个复数,如 ...

  3. Xshell 连接centOS虚拟机、centOS内置python版本升级

    Xshell 连接虚拟机 前置条件:VMware Workstation 12.5.1.Xshell 5 .  centOS 6.6 1.打开虚拟机,输入用户名和密码: 2.输出命令:ifconfig ...

  4. 我的Android进阶之旅------>Android如何通过自定义SeekBar来实现视频播放进度条

    首先来看一下效果图,如下所示: 其中进度条如下: 接下来说一说我的思路,上面的进度拖动条有自定义的Thumb,在Thumb正上方有一个PopupWindow窗口,窗口里面显示当前的播放时间.在Seek ...

  5. vue 组件与传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  6. 在PyCharm上创建Django项目

    声明:此Django分类下的教程是追梦人物所有,地址http://www.jianshu.com/u/f0c09f959299,本人写在此只是为了巩固复习使用 首先我们在Pycharm上新建一个Dja ...

  7. BZOJ 1614 [Usaco2007 Jan]Telephone Lines架设电话线：spfa + 二分【路径中最大边长最小】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1614 题意: 给你一个无向图,n个点,m条边. 你需要找出一条从1到n的路径,使得这条路径 ...

  8. jQuery圆形统计图（百分比）转 作者：月光光

    今天我给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便. 如何使用circliful 将jquer ...

  9. OpenCV——花环生成函数

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  10. 【C++基础】重载，覆盖，隐藏

    函数签名的概念 函数签名主要包括1.函数名:2.参数列表(参数的个数.数据类型和顺序):但是注意,C++官方定义中函数签名不包括返回值!! 1.重载 函数重载是指在同一作用域内,可以有一组具有相同函数 ...