jQuery动态星级评分效果实现方法


Posted in Javascript onAugust 06, 2015

本文实例讲述了jQuery动态星级评分效果实现方法。分享给大家供大家参考。具体如下:

这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现星级评分,你需要动态程序配合,如ASP/PHP等,以便将评分值存入数据库。

运行效果如下图所示:

jQuery动态星级评分效果实现方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery超漂亮星级评分</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
.user_rate {font-size:14px; position:relative; padding:10px 0;}
.user_rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; top:0; left:100px; margin-left:140px;}
.user_rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;}
.user_rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;}
.big_rate_bak {width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(//img.jbzj.com/file_images/article/201508/201586174000242.gif) left bottom repeat-x;}
.big_rate_bak b {display:inline-block; width:24px; height:28px; position:relative; z-index:1000; cursor:pointer; overflow:hidden;}
.big_rate_up {width:140px; height:28px; position:absolute; top:0; left:0; background:url(//img.jbzj.com/file_images/article/201508/201586174000242.gif) left top;}
</style>
</head>
<body>
<div class="user_rate">
 <div class="big_rate_bak">
  <b rate="2" onclick="javascript:up_rate(20);"> </b>
  <b rate="4" onclick="javascript:up_rate(40);"> </b>
  <b rate="6" onclick="javascript:up_rate(60);"> </b>
  <b rate="8" onclick="javascript:up_rate(80);"> </b>
  <b rate="10" onclick="javascript:up_rate(100);"> </b>
  <div style="width:45px;" class="big_rate_up"></div>
 </div>
 <p><span id="s" class="s"></span><span id="g" class="g"></span></p>
</div>
<br><br>如果运行错误请刷新页面即可~
</body>
<script type="text/javascript">
$(function(){
  get_rate(88);
})
function get_rate(rate){
  rate=rate.toString();
  var s;
  var g;
  $("#g").show();
  if (rate.length>=3){
    s=10;  
    g=0;
    $("#g").hide();
  }else if(rate=="0"){
    s=0;
    g=0;
  }else{
    s=rate.substr(0,1);
    g=rate.substr(1,1);
  }
  $("#s").text(s);
  $("#g").text("."+ g);
  $(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000);
  $(".big_rate_bak b").each(function(){
    $(this).mouseover(function(){
      $(".big_rate_up").width($(this).attr("rate") * 14 );
      $("#s").text($(this).attr("rate"));
      $("#g").text("");
    }).click(function(){
      $("#f").text($(this).attr("rate"));
      $("#my_rate").show();
    })
  })
  $(".big_rate_bak").mouseout(function(){
    $("#s").text(s);
    $("#g").text("."+ g);
    $(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);
  })
}
function up_rate(rate){
  $(".big_rate_up").width("0");
  get_rate(rate);
}
</script>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
js单例模式详解实例
Nov 21 Javascript
jQuery DOM操作实例
Mar 05 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 #Javascript
JS实现霓虹灯文字效果的方法
Aug 06 #Javascript
javascript实现网页背景烟花效果的方法
Aug 06 #Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 #Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 #Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 #Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
python获取图片颜色信息的方法
2015/03/18 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python Django框架实现自定义表单提交
2016/03/25 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
如何使用python传入不确定个数参数
2020/02/18 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
《独坐敬亭山》教学反思
2014/04/08 职场文书
师德师风承诺书
2014/05/23 职场文书
2015年质检工作总结
2015/05/04 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏