您的位置：首页 > Web前端 > JQuery

jquery+css实现简单的评分功能

2013-01-29 17:10 751 查看

今天研究了下简单的评分功能，参考了下"http://www.lanxyou.info/star-rating-new-method/",感觉比较简单易用，之后自己做了下优化处理。

先看下效果图：

原理：橙色星宽度/父容器宽度 * 100 = 分值

功能：鼠标悬浮时，其左侧星星点亮

　　　鼠标滑过时，其左侧星星点亮

　　　鼠标点击时，其左侧星星点亮

　　鼠标移开后，默认记忆上次点击的橙色星宽度

所需图片：

实现源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js" type="text/javascript"></script>
<title>jquery+css实现简单评分功能</title>
<style>
.rating{
float:left;
height:23px;
width:115px;
background:url('star.png') repeat-x 0 0;
cursor:pointer;
}
.rating a{
display:block;
height:100%;
width:100%;
background:url('star.png') repeat-x 0 -23px;
}
#score{
float:left;
margin-left:10px;
font-family:'微软雅黑';
font-size:18px;
}
#score em{
color:#FF6600;
font-weight:bold;
padding:10px;
}
</style>
</head>

<body>
<div id="rating" class="rating" ><a></a></div>
<div id="score"><em>0</em>分</div>
<script>
var rating=$('#rating');
var leftRating = rating.offset().left,
width = rating.width(),
clickWidth = 0;

rating.mouseover(function(e){
var overWidth=parseInt(((e.pageX-leftRating)/width)*100,10);
$(this).find('a').css({'width':(overWidth+'%')});
});
rating.mouseout(function(){
$(this).find('a').css({'width':(clickWidth)+'%'});
});
rating.mousemove(function(e){
var hoverWidth=parseInt(((e.pageX-leftRating)/width)*100,10);
$(this).find('a').css({'width':(hoverWidth+'%')});
});
rating.click(function(e){
clickWidth=parseInt(((e.pageX-leftRating)/width)*100,10);
$(this).find('a').css({'width':(clickWidth+'%')});
$('#score em').text(clickWidth);
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航