jquery星级插件、支持页面中多次使用


Posted in Javascript onMarch 25, 2012

效果图如下:

jquery星级插件、支持页面中多次使用

css所需背景图片:
jquery星级插件、支持页面中多次使用
二话不说,帖代码:
html代码
<div class="xing"> 
<span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font></span><div 
class="rating-wrap"> 
<ul id="xing1"> 
<li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars"> 
</a></li> 
</ul> 
</div> 
<span class="xing1">点击星星开始打分</span> 
</div> 
<divclass="xing"> 
<span style="float: left">广告效果:<font color="#CC3300"size="-1">*</font></span><div 
class="rating-wrap"> 
<ulid="xing2"> 
<li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars"> 
</a></li> 
</ul> 
</div> 
<span class="xing2">点击星星开始打分</span> 
</div>

JS代码
<script type="text/javascript" src="js/jQuery_1.42.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".rating-wrap a").mouseover(function(){ 
$(this).parent().siblings().find("a").removeClass("active-star"); 
$(this).addClass("active-star"); 
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")) 
}).mouseleave(function(){ 
var selectID=$(this).parent().parent().attr("id")+"select"; 
$(this).removeClass("active-star"); 
if($("#"+selectID).length==0) 
{ 
$("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("点击星星开始打分"); 
} 
else 
{ 
$("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint")); 
$("#"+selectID).addClass("active-star"); 
} 
}).click(function(){ 
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select"); 
$(this).parent().siblings().find("a").attr("id",""); 
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint"); 
}) 
}) 
</script>

css代码
<style> 
.item-rank-rst, .user-rank-rst, .rating-wrap ul, .rating-wrap a:hover, .rating-wrap .active-star, .user-m-star, .urr-rank60, .breadcrumb .note { 
background-image: url(xing_bg.png);/**-----星级插件背景图片----**/ 
background-repeat: no-repeat; 
} 
.rating-wrap { 
background: none repeat scroll 0 0 #FFF9F1; 
border: 1px solid #EFE0D7; 
display: inline-block; 
float: left; 
height: 20px; 
margin-right: 5px; 
padding: 4px 0 0 5px; 
position: relative; 
top: -2px; 
width: 89px; 
z-index: 0; 
} 
.rating-wrap ul { 
background-position: 0 -250px; 
height: 16px; 
position: relative; 
width: 85px; 
z-index: 10; 
} 
.rating-wrap li { 
display: inline; 
} 
.rating-wrap a { 
display: block; 
height: 16px; 
left: 0; 
position: absolute; 
top: 0; 
} 
.rating-wrap .five-stars { 
background-position: 0 -160px; 
width: 84px; 
z-index: 10; 
} 
.rating-wrap .four-stars { 
background-position: 0 -178px; 
width: 68px; 
z-index: 20; 
} 
.rating-wrap .three-stars { 
background-position: 0 -196px; 
width: 51px; 
z-index: 30; 
} 
.rating-wrap .two-stars { 
background-position: 0 -214px; 
width: 34px; 
z-index: 40; 
} 
.rating-wrap .one-star { 
background-position: 0 -232px; 
width: 17px; 
z-index: 50; 
} 
.rating-block .hint { 
color: #999999; 
float: left; 
} 
.active-hint { 
color: #CC0000; 
} 
.rating-block .err-hint { 
color: #EE0000; 
font-weight: bold; 
} 
</style>

注:css代码从项目中分解出,有一小部分没贴完,大家可以根据自己的需求修改css style
Javascript 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 #Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 #Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 #Javascript
ExtJs使用总结(非常详细)
Mar 22 #Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 #Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 #Javascript
利用json获取字符出现次数的代码
Mar 22 #Javascript
You might like
PHP闭包(Closure)使用详解
2013/05/02 PHP
浅析is_writable的php实现
2013/06/18 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php自定义hash函数实例
2015/05/05 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PDO::inTransaction讲解
2019/01/28 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
PHP 实现缩略图
2021/03/09 PHP
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
python定时器使用示例分享
2014/02/16 Python
Python import用法以及与from...import的区别
2015/05/28 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python实现批量转换图片为黑白
2020/06/16 Python
pycharm导入源码的具体步骤
2020/08/04 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
幼儿园小班家长寄语
2014/04/02 职场文书
员工考核评语大全
2014/04/26 职场文书
2015年仓库工作总结
2015/04/09 职场文书
致青春观后感
2015/06/09 职场文书