`
465272694
  • 浏览: 51468 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

星星打分效果

阅读更多

这里只提供javascript和html,只供参考,没有例子下载看,我想只要有一些javascript和jquery基础的都能看懂吧。

jquery代码:

$(document).ready(function(){
        $("#stars a").each(function(i){
            $(this).mouseover(function(){
                $("#stars a:lt("+(i+1)+")").attr("class","cur");
                $("#stars a:gt("+i+")").removeClass("cur");
                $("#isRank").attr("value",i+1);//把打的分数放到隐藏域
            });
            $(this).click(function(){
                $("#isRank").attr("value",i+1);
            });
            $(this).mouseout(function(){
                var cur_star = parseInt($("#isRank").val())-1;
                $("#stars a:lt("+(cur_star+1)+")").attr("class","cur");
                $("#stars a:gt("+cur_star+")").removeClass("cur");
                $("#isRank").attr("value",i+1);//把打的分数放到隐藏域
            });

        })
    });

 html页面

<div class="area">
        <div class="fixBox">
            <label>评分:</label>
            <div class="stars" id="stars">
                <a href="javascript:void(0)" class="cur" id="star1"  ></a>
                <a href="javascript:void(0)" id="star2"  ></a>
                <a href="javascript:void(0)" id="star3"  ></a>
                <a href="javascript:void(0)" id="star4"  ></a>
                <a href="javascript:void(0)" id="star5" ></a>
            </div>
            <input type="hidden" value="1" id="isRank" />
            <div class="clear"></div>
        </div>
</div>
 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics