問題已經(jīng)解決，粗心造成的錯誤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Star rating 1</title>
? <style type="text/css">
? body,ul,li{
? ?padding: 0;
? ?margin: 0;
? }
? li{
? ?list-style-type: none;
? }
? .rating{
? ? ? ? width: 165px;
? ? ? ? height: 40px;
? ? ? ? margin: 100px auto;
? ? ? ? overflow: hidden;
? }
? .rating-item{
? ?float:left;
? ?width: 33px;
? ?height: 33px;
? ?background: url(img/star.png) no-repeat;
? ?cursor:pointer;
? }
? </style>
</head>
<body>
<!--The First way-->
<ul class="rating" id="rating">
? ? ? ? <li class="rating-item" title="很不好"></li>
? ? ? ? <li class="rating-item" title="不好"></li>
? ? ? ? <li class="rating-item" title="一般"></li>
? ? ? ? <li class="rating-item" title="好"></li>
? ? ? ? <li class="rating-item" title="很好"></li>
? ? </ul>
? ? <script
? src="https://code.jquery.com/jquery-1.11.3.min.js"
? integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
? crossorigin="anonymous"></script>
? <script type="text/javascript">
? var num = 2,
? $item = $('#rating').find('.rating-item');
? var lightOn = function(num){
?
? ?? $item.each(function(index){
? ??
? ?if(index < num){
? ?$(this).css('background-position', '0 -68px');
? ?}else{
? ?$(this).css('background-position','0 0');
? ?}
? });
? };
??
lightOn(num);
$item.on('mouseover',function() {
lightOn($(this).index()+1);
}).on('click', function() {
num=$(this).index()+1;
/* Act on the event */
});
$('#rating').on('mouseout',function() {
lightOn(num);
});
? </script>
</body>
</html>
2019-01-04
這個jq庫可以用，下載的沒效果
2018-04-16
什么問題？怎么解決的？