javascript - Jquery 鼠标悬停精灵

Question

嗨，如何编写可用于评价价格评级的 jquery 代码？下面是图片的截图

该代码的html代码如下：

<fieldset id="price_choices">
        <legend class="offscreen">Price Range:</legend>
            <p class="offscreen">Price per person:</p>
        <ul class="clearfix price-1">
            <li>
                <input type="radio" id="price-1" name="RestaurantsPriceRange2" value="1">               <label for="price-1" class="offscreen">

                </label>
            </li>
            <li>
                <input type="radio" id="price-2" name="RestaurantsPriceRange2" value="2">               <label for="price-2" class="offscreen">

                </label>
            </li>
            <li>
                <input type="radio" id="price-3" name="RestaurantsPriceRange2" value="3">               <label for="price-3" class="offscreen">

                </label>
            </li>
            <li>
                <input type="radio" id="price-4" name="RestaurantsPriceRange2" value="4">               <label for="price-4" class="offscreen">

                </label>
            </li>
        </ul>
    </fieldset>

对于渲染评分精灵图像的css如下：

#price_choices ul {
padding: 0 7px;
height: 28px;
background: url(../images/dollars.gif) 0 0 no-repeat;
}
#price_choices li {
width: 20px;
height: 100%;
overflow: hidden;
}
#price_choices li {
padding: 0;
float: left;
}
#price_choices input {
margin: 0!important;
padding: 0;
border: 0;
cursor: pointer;
width: 100%;
height: 100%;
-moz-opacity: 0;
opacity: 0;

}
#price_choices ul.price-1 {
background-position: 0 -28px;
}
#price_choices ul.price-2 {
background-position: 0 -56px;
}
#price_choices ul.price-3 {
background-position: 0 -84px;
}
#price_choices ul.price-4 {
background-position: 0 -112px;
}

图片精灵 Dollars.gif 如下：

此外，当用户将鼠标悬停在每个 li 元素上时，美元符号会不断添加，并且当用户单击特定 li 时，Jquery 应该提醒该特定 li 的值。谢谢

Answer 1

这个类似于星级

我正在为类似的事情使用 javascript。

我想这会对你有所帮助。

<script type="text/javascript">
            $(function() {

                $('#default').raty();


                $('#half').raty({
                    half    : true,
                    score   : 3.3
                });

                $('#round').raty({
                    score   : 1.26,
                    round   : { down: .25, full: .6, up: .76 }
                });


                $('#precision').raty({
                    half        : true,
                    path        : 'doc/img/', /* the path of your $ images*/
                    precision   : true,
                    size        : 24,
                    starOff     : 'star-off-big.png',//grey image of $
                    starOn      : 'star-on-big.png',//green img of $
                    target      : '#precision-target',
                    targetKeep  : true,
                    targetType  : 'number'
                });



            });
        </script>

然后在您的 HTML 部分中添加以下内容：

<div id="precision"></div>
<input type="text" id="precision-target" name="txt"/></div><br/>

还下载jquery.raty.min.js并将其包含在您的页面中

Answer 2

网络上有很多资源可以做到这一点......搜索最少吗？

非常详细的待办事项

或所有制作的插件

甚至一些汇编

或者也许这个？

或者更大的汇编；）

Answer 3

如果我很好理解，这样的东西应该可以工作

$('ul').mouseover(function(){
 var ind = $(this).find('input').val();
 var shift = (ind-2)*28;
 $(this).css('background-position', '0 ' +shift+ 'px');
});