jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法。分享给大家供大家参考。具体如下:
这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现星级评分,你需要动态程序配合,如ASP/PHP等,以便将评分值存入数据库。
运行效果如下图所示:
<!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(http:
//files.jb51.net/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(http:
//files.jb51.net/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>
转载于:https://www.cnblogs.com/sjqq/p/6386305.html
jQuery动态星级评分效果实现方法相关推荐
- jQuery Raty星级评分插件使用方法
转载自 jQuery Raty星级评分插件使用方法 使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com ...
- php星级评分,jQuery_基于jQuery的星级评分插件,首先看一下运行效果如下图所 - phpStudy...
基于jQuery的星级评分插件 首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮. 一.原理本程序的原理是这样的:一个&qu ...
- php评星,jQuery+PHP星级评分实现方法
搜索热词 本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate ...
- php mysql 星级评分_jQuery+PHP实现星级评分效果
码农公社 210.net.cn 210= 1024 10月24日一个重要的节日--码农(程序员)节 jQuery+PHP实现星级评分效果,评分功能比较常用,例如商城平台就会有个评分功能,本实例就 ...
- 星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享,前面有一篇原生js实现星级评 - phpStudy...
使用jQuery实现星级评分代码分享 前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. http://s.thsi.cn/js/jquery-1.7.2. ...
- 用css实现星级评分效果
以前看到其他网站实现的实现的星级评分效果,没在意那么多,直到昨天做一个页面需要这个功能效果时,发现自己实现起来还是这么困难,折腾了半天才弄出来. 1. 其实主要是利用背景图片的切换位置来实现星级的效果 ...
- 移动端星级评分效果的实现
星级评分在网页当中是经常用到的,今天特地用原生的JS实现了在移动端中的星级评分效果.由于在移动端中是没有鼠标事件的,所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同,就是要把相应的事件转成 ...
- html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画 语法: $(selector).animate({params},spee ...
- html css星级评分,纯css实现星级评分效果
效果 效果图如下 星级评分 实现思路: 5个类型为radio的input,abel标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋转的动画 dom结构 用form ...
- js实现星级评分效果(非常规5个li代码)
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
最新文章
- 【Android 高性能音频】AAudio 状态机 ( 创建 | 打开 Open | 开始 Started | 暂停 Paused | 刷写 Flushed | 停止 Stopped | 关闭 )
- HTML5调用redis,redis实现从数据库获取数据添加到html页面上
- appium 搭建及实例
- Oracle ODP.NET数据库访问连接字符串
- Loadrunner进行HTTPS协议性能测试
- macOS卸载Java9及利用Homebrew搭建并配置Java开发环境
- python使用sqlite
- 买iPhone将可能只有盒子了?网友:库克账号多少,我直接打钱吧?
- String s = new String(“xyz“);创建了几个字符串对象?
- Atitit web httphandler的实现 java python node.js c# net php 目录 1.1. Java 过滤器 servelet	1 1.2. Python的
- java开源工作流引擎
- 2022年对于李一男是关键的一年,这也将决定他的社会地位
- 404究竟是什么意思呢?像404,200,503等数字究竟是什么东西
- A* 算法原理以及在二维环境地图中的应用 -- Python 代码实现
- 【Unity】创建自定义Playable,使用Timeline控制Particle System的参数
- HUST软测1504班第2周作业成绩:WordCount
- Cisco c3560三层交换机配置
- Linux下的时间详解【转】
- CSS3_flex布局, 永远滴神 !
- VI设计与平面设计有什么区别 该怎么学好UI设计
热门文章
- 使用weui滚动加载结合php实现分类页数据列表
- 唯一分解,逆元,正约数个数和正约数和,欧拉筛
- ES6 面向对象编程
- 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第3节 两种获取Stream流的方式_1_两种获取Stream流的方式...
- CPU Usage (C#) 测试
- 使用Myvatis Generator自动创建项目代码
- Yii2如何用migrate快速建表
- [ACM训练] 算法初级 之 基本算法 之 枚举(POJ 1753+2965)
- Android 定位地理坐标体系
- 高聚合和低耦合的理解