Centos系统下载大全 | Redhat系统下载大全 | Windows2012系统下载大全 | Windows2008系统下载大全| CMS教程 | 网站地图 51运维网-专注Linux/Unix系统安全运维!
当前位置:51运维网 > Web前端 > jQuery > 正文

jquery动态星星评分实现代码_jquery星星评分使用方法

时间:2015-05-20 09:53 来源:网络整理 作者:51ou.com 阅读:

jquery动态星星评分代码

专题:jquery星星评分

使用方法:

1、引用样式文件css/lrtk.css

2、引用jquery的库文件js/jquery.js

3、引用效果的具体js代码文件js/lrtk.js

4、将id为xzw_starSys的DIV的内容复制到您的html文件

5、如果您的页面编码为utf-8,请将lrtk.js的页面编码也改为utf-8,以免出现乱码问题。

html部分:
 

复制代码 代码示例:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "">
<html xmlns="">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>动态星星评分_</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!--代码开始-->
<div id="xzw_starSys">
<div id="xzw_starBox">
<ul class="star" id="star">
<li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
<li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
<li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
<li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
<li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
</ul>
<div class="current-rating" id="showb"></div>
</div>
<!--评价文字-->
<div class="description"></div>
</div>
<!--代码结束-->
</body>
</html>

2,lrtk.js
 

复制代码 代码示例:

//star
$(document).ready(function(){
var stepW = 24;
var description = new Array("非常差,回去再练练","真的是差,都不忍心说你了","一般,还过得去吧","很好,是我想要的东西","太完美了,此物只得天上有,人间哪得几回闻!");
var stars = $("#star > li");
var descriptionTemp;
$("#showb").css("width",0);
stars.each(function(i){
$(stars[i]).click(function(e){
var n = i+1;
$("#showb").css({"width":stepW*n});
descriptionTemp = description[i];
$(this).find('a').blur();
return stopDefault(e);
return descriptionTemp;
});
});
stars.each(function(i){
$(stars[i]).hover(
function(){
$(".description").text(description[i]);
},
function(){
if(descriptionTemp != null)
$(".description").text("当前您的评价为:"+descriptionTemp);
else
$(".description").text(" ");
}
);
});
});
function stopDefault(e){
if(e && e.preventDefault)
   e.preventDefault();
else
   window.event.returnValue = false;
return false;
};

3,css样式
 

复制代码 代码示例:

@charset "utf-8";
*{font:normal 12px/2em '微软雅黑';padding:0;margin:0}
ul,li{list-style:none}
a{ color:#09f;}
/*容器*/
#xzw_starSys{width:400px;border:1px solid #ccc;padding:50px;margin:100px auto}
#xzw_starBox{position:relative;width:120px;float:left}
/**/
#xzw_starSys .description{clear:both;padding:10px 0px}
#xzw_starSys .star{height:20px;width:120px;position:relative;background:url(../images/jbxue.png) repeat-x;cursor:pointer}
#xzw_starSys .star li{float:left;padding:0px;margin:0px}
#xzw_starSys .star li a{display:block;width:24px;height:20px;overflow:hidden;text-indent:-9999px;position:absolute;z-index:5}
#xzw_starSys .star li a:hover{background:url(../images/jbxue.png) 0 -25px repeat-x;z-index:3;left:0}
#xzw_starSys .star a.one-star{left:0}
#xzw_starSys .star a.one-star:hover{width:24px}
#xzw_starSys .star a.two-stars{left:24px}
#xzw_starSys .star a.two-stars:hover{width:48px}
#xzw_starSys .star a.three-stars{left:48px}
#xzw_starSys .star a.three-stars:hover{width:72px}
#xzw_starSys .star a.four-stars{left:72px}
#xzw_starSys .star a.four-stars:hover{width:96px}
#xzw_starSys .star a.five-stars{left:96px}
#xzw_starSys .star a.five-stars:hover{width:120px}
#xzw_starSys .current-rating{background:url(../images/jbxue.png) 0 -25px repeat-x;position:absolute;height:20px;z-index:1;top:0;left:0}

感谢您对【51运维网 http://www.51ou.com/】的支持,我们为您免费提供《jquery动态星星评分实现代码_jquery星星评分使用方法》技术文章,《jquery动态星星评分实现代码_jquery星星评分使用方法》详细使用和说明,有时《jquery动态星星评分实现代码_jquery星星评分使用方法》可能不完善、敬请谅解!如果《jquery动态星星评分实现代码_jquery星星评分使用方法》有错误请给我们留言,我们将尽快修复文章错误,如果您觉得本站不错,请分享给周围的朋友!谢谢!

顶一下
(0)
0%
踩一下
(0)
0%
上一篇:jquery实现淘宝星星评分入门实例
下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
验证码:点击我更换图片