js评价五星

js评价五星

1、图片（star.png）：

2、图片和html文件在同级目录

<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.difficulty i').click(function(){$(this).nextAll().removeClass('s');$(this).prevAll().addClass('s');$(this).addClass('s');});
  $('.difficulty i').mouseenter(function(){$(this).nextAll().removeClass('h');$(this).prevUntil('.s').addClass('h');$(this).addClass('h');}).mouseleave(function(){$(this).siblings().removeClass('h');$(this).removeClass('h');});
});
</script>
<style  type="text/css">
.difficulty { width:80px; height:14px; float:left; margin:7px 30px 0 0;}
.difficulty i{ width:15px; height:14px; float:left; background:url(star.png) no-repeat -30px 0; margin:0 1px 0 0; cursor:pointer;}
.difficulty i.h{ background:url(star.png) no-repeat -15px 0;}
.difficulty i.s{ background:url(star.png) no-repeat 0 0;}
</style>
</head>

<body>
<div class="difficulty"><i></i> <i></i> <i></i> <i></i> <i></i></div>
</body>

</html>

　　

posted @ 2017-09-21 22:13  N神3  阅读(564)  评论(0)  编辑  收藏  举报