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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
javascript操作表格排序实例分析
May 06 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
layui table设置某一行的字体颜色方法
Sep 05 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 木马攻击防御技巧
2009/06/13 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
JS实现li标签的删除
2019/04/12 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
应届生求职信范文
2014/06/30 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
行政经理岗位职责
2015/04/15 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电