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

所属分类: 网页特效-投票&评分    2024-11-13 03:15:53

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带动画滑动的可爱的五星评分评级特效代码

一个可爱的五星评级评分插件,通常对文章、产品、电影、评论等进行在线评分时比较常用,采用svg作为图标,点击可触发星星动画跳动。
  投票&评分
 1216  0

jquery商品订单评价

一款星级评分特效,五星评分和多选菜单功能,以及留言文本框。
  投票&评分
 347  0

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

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

jquery轻量级星星爱心评分特效代码

jsRapStar是一个轻量级可自定义的图标评分插件,可使用鼠标选择图标带回调函数,显示当前数值。
  投票&评分
 9265  0

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

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