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 相关文章推荐
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
浅析JS运动
Dec 28 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
vue实现分页组件
Jun 16 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Django中的session用法详解
2020/03/09 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
J2EE系统只能是基于web
2015/09/08 面试题
财务管理专业自荐信范文
2013/12/24 职场文书
小学生演讲稿大全
2014/04/25 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python