星级评分--封装成jquery插件
<!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插件的更多相关文章
- 如何将Js代码封装成Jquery插件
很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...
- 自己做jQuery插件：将audio5js封装成jQuery语音播放插件
日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...
- 封装第三方jquery插件
需要自己编写 directives 的情况通常是当你使用了第三方的 jQuery 插件.因为插件在 AngularJS 之外对表单值进行更改,并不能即时反应到 Model 中.例如我们用得比较多的 j ...
- 学了一个封装的jquery插件，感觉还成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 气球或者泡泡向上飘动 jQuery插件
圣诞.元旦要来了,公司以往基本每个月至少要搞一两款手机小游戏来宣传产品,这次也不例外!! 之前做过,按压柚子.许愿.吃柚子等等小游戏,这次是做个那种 气球向上飘动,戳破气球,随机获取奖品.如下图: 手 ...
- JQuery-- 链式编程、静态函数,自己制作jQuery插件
一.链式编程 为什么jQuery运行链式编程 ,让我们的代码(方法)连续不间断书写(连续调用)其实主要还是jQuery很多的函数执行完毕之后,都会返回一个jQuery对象 因为获取操作的时候,会返回获 ...
- 点击弹出 +1放大效果 -- jQuery插件
20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...
- 我的第一个jquery插件：下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- 发布一个在Web下输入密码时提示大写锁定键的Jquery插件
功能介绍:在Web下输入密码时提示大写锁定键,封装成jq插件方便有需要的同学!使用:$("#txtPWD").capsLockTip();截图预览:代码(2012-05-03 10 ...
随机推荐
- EasyNVR H5无插件摄像机直播解决方案前端解析之：关于直播页面和视频列表页面切换的问题
关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息.一般多会分为列表展示和实时的视频直播展示. 表面上只是两个视图之间的随意切换,其实切换的两个 ...
- Greedy Function Approximation:A Gradient Boosting Machine
https://statweb.stanford.edu/~jhf/ftp/trebst.pdf page10 90% to 95% of the observations were often de ...
- sed 和awk结合取ip 地址
1.打印文件的第一列(域) : awk '{print $1}' filename 2.打印文件的前两列(域) : awk '{prin ...
- （*）（转）要快速学习SSM框架，你需要一套学习曲线平滑的教程
作者:meepo链接:https://www.zhihu.com/question/57719761/answer/156952139来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- ftl总结
当前项目前端是用freemarker,是第一次使用这种页面,一般语法不介绍,这里只是记录工作中遇到的问题 ---------2016.6.25-------------- 1.关于ftl字符串的问题 ...
- 采集练习(十一) php 获得电视节目预告---数据来自电视猫
昨天写了个采集搜视网的电视节目预告,刚好今天有心情,想采下其他网站提供的节目预告,发现 电视猫wap版 的提供的节目预告也蛮好采(需要正则)....感谢移动互联网! 电视猫的 wap版地址是 htt ...
- [2018-10-10]记录一下Vue的一个问题
最近用vue typescript SPA 做管理后台(ABP官网导出的vue项目模板),遇到一个错误,找了好久,虽然有相关资料,但发现都没解决,这里自己记录一下. Failed to mount c ...
- 升级GCC 6.2编译LLVM的问题
[ 55%] Built target RTInterception.x86_64 [ 55%] Building ASM object projects/compiler-rt/lib/saniti ...
- UVA - 11475 Extend to Palindrome —— 字符串哈希 or KMP or 后缀数组
题目链接:https://vjudge.net/problem/UVA-11475 题意: 给出一个字符串,问在该字符串后面至少添加几个字符,使得其成为回文串,并输出该回文串. 题解: 实际上是求该字 ...
- promise介绍
promise简介 Promise的出现,原本是为了解决回调地狱的问题.所有人在讲解Promise时,都会以一个ajax请求为例,此处我们也用一个简单的ajax的例子来带大家看一下Promise是如何 ...