jquery带弹出动画的五星评分插件

所属分类: 网页特效-投票&评分    昨天上传

jquery带弹出动画的五星评分插件 ie兼容6
反馈问题  查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery带弹出动画的五星评分插件(共3个文件)

    • script.js
    • index.html
    • style.css

使用方法

// Globals
var rating = $('.rating');

// Create rating popup
rating.on('click', function(e) {
  var self = $(this),
      userRating = $('<ul />').attr('class', 'user-rating animate');
  
  // Create stars if not already on page
  if (!self.find('.user-rating').length) {
    for (var i = 0; i < 5; i++) {
      userRating.prepend('<li data-rating="' + (i + 1) + '"><i class="fa fa-star"></i></li>');
    };
    
    // Add stars to page
    userRating.appendTo(self);
    setTimeout(function() {
      userRating.removeClass('animate');
    }, 50);
  };
  
  e.preventDefault();
  e.stopPropagation();
});

// Select rating
rating.on('click', '.user-rating li', function() {
  var self = $(this),
      rateVal = self.data('rating');
  
  setTimeout(function() {
    removeRating(rateVal);
  }, 300);
});

// Remove rating popup
function removeRating(rateVal) {
  rating.children('.user-rating').addClass('animate');
  setTimeout(function() {
    rating.children('.user-rating').remove();
  }, 350);
  
  if (rateVal) {
    // Ajax submit here
    
    rating.addClass('hide');
    setTimeout(function() {
      rating.text(rateVal).removeClass('hide');
    }, 150);
  };
};

$(document).on('click', function() {
  if (rating.children('.user-rating').length) {
    removeRating();
  };
});

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 投票&评分

jquery爱心图标单击点赞动画特效

一款红心图标单击动画效果,鼠标点击爱心图标触发动画效果,并且点赞数+1。
  投票&评分
 221  0

jquery+CSS3表情签到评分动画特效代码

一款选择表情发布心情特效,一共三个表情状态选择动画特效,分别为:非常好、一般、很坏。鼠标悬停带动画的文字提示。
  投票&评分
 4321  0

jquery倾斜星星图标半星评分插件

一款支持半星评分插件,从做到有五颗星颜色采用渐变递进,支持半颗星点选评分。
  投票&评分
 38  0

jquery基于radio星星评分打分特效代码

一款星级评分插件,集成了三种不同的模式:基础评分、自动提交、悬停交互,带回调提示。
  投票&评分
 3274  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论
站长在线
即时聊天