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 实现TreeView CheckBox全选效果
Jan 11 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JavaScript运行原理分析
Feb 09 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
怎样在vue项目下添加ESLint的方法
May 16 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
用函数读出数据表内容放入二维数组
2006/10/09 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
大学校庆邀请函
2014/01/11 职场文书
店长职务说明书
2014/02/04 职场文书
大型营销活动计划书
2014/04/28 职场文书
个人担保书范文
2014/05/20 职场文书
委托书的格式
2014/08/01 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
政风行风评议心得体会
2014/10/21 职场文书
回门宴新娘答谢词
2015/09/29 职场文书