星星点击评价效果代码

最新推荐文章于 2019-09-29 13:53:00 发布

wang55812526

最新推荐文章于 2019-09-29 13:53:00 发布

阅读量2.6k

点赞数

文章标签：星星评价

 
  <html>
 
<head><title>JQuery星星评级</title><meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
 
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
 
<style type="text/css">
 
<!--
 
.star_rating {background:url(http://static.oschina.net/uploads/space/2011/0711/114922_gGrF_101311.gif) -80px 0 no-repeat; padding:0;margin:0; width:80px; height:16px; float:left; position:relative; }
 
.star_rating li {padding:0;margin:0;float:left;width:16px;height:16px;}
 
-->
 
</style>
 
</head><body>
 
<div style="display:block; float:left;width:100px;"><span>*</span>&nbsp;总体评价：</div>
 
<ul class="star_rating"><li/><li/><li/><li/><li/></ul>
 
     
 
<script type="text/javascript">
 
$('.star_rating li').each(function(){
 
    $(this).click(function(obj){
 
        $('.star_rating li').unbind();
 
        var Too = (obj.srcElement.offsetLeft+16);
 
        setStarPos(Too-80);
 
        alert((Too/16)+'星');
 
    }).mouseover(function(obj){
 
        setStarPos((obj.srcElement.offsetLeft+16)-80);
 
    }).mouseout(function(obj){
 
        setStarPos('-80');
 
    });
 
});
 
function setStarPos(le){
 
    $('.star_rating').css({'backgroundPosition':le+'px 0'});
 
};
 
</script></body></html>

wang55812526

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
星星点击评价效果代码

html>02head>title>JQuery星星评级title>meta http-equiv="Content-Type" content="text/html; charset=gbk"/>03script src="http://jqueryjs.googlecode.com/files/
复制链接

扫一扫