星级评分--封装成jquery插件
2017-07-23 22:42
459 查看
<!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>
素材
![](https://images2015.cnblogs.com/blog/737276/201707/737276-20170723224121729-767822423.png)
相关文章推荐
- 用js+jquery以面向对象的方式写的星级评分插件
- jQuery Raty - 不错的星级评分插件
- 基于jQuery的星级评分插件
- 星级评分jquery插件
- 星级评分--jQuery插件
- 【转载】星级评分--jQuery插件
- jQuery插件之-jQuery Raty星级评分
- 星级评分--jQuery插件
- 星级评分--jQuery插件
- JQuery插件--星级评分
- jQuery星级评分功能插件(修改适应IE6,IE7, IE8, Firefox, Opera, Chrome, Safari)
- jQuery星级评分插件
- 基于SVG的jQuery星级评分插件-jRate
- 基于jQuery的星级评分插件
- 星级评分--jQuery插件 (转)
- jquery插件star-rating.js实现星级评分特效
- jquery封装评分插件
- jQuery插件入门学习—— 学习目标:写一个星级评分插件(jquery插件基础写法)
- 基于jQuery的星级评分插件
- 星级评分--jQuery插件