关闭

通用商品/商家星星评价HTML-支持webapp使用

标签: html5cssjavascriptweb app评论
1053人阅读 评论(0) 收藏 举报
分类:

代码使用备注:

1. jquery-1.8.3.min.js(自备)

2.star_empty.png为空星星 star_full.png为亮星星 (自备)

3.div的样式可以自己调整(自备)

4.添加初始化代码,可支持多个评论项,eg:口味、环境、物流、服务等

$(function(){
            initEvent('mydiv1');
            initEvent('mydiv2');
        });


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="content-script-type"content="text/javascript">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <title></title>
    <script type="text/javascript">
        var isclick = false;
        function change(mydivid,num) {
            if (!isclick) {
                var tds = $("#"+mydivid+" ul li");
                for (var i = 0; i < num; i++) {
                    var td = tds[i];
                    $(td).find("img").attr("src","images\/star_full.png");
                }
                var tindex = $("#"+mydivid).attr("currentIndex");
                tindex = tindex==0?0:tindex+1;
                for (var j = num; j < tindex; j++) {
                    var td = tds[j];
                    $(td).find("img").attr("src","images\/star_empty.png");
                }
                $("#"+mydivid).attr("currentIndex",num);
            }
        }
        function repeal(mydivid,num) {
            if (!isclick) {
                var tds = $("#"+mydivid+" ul li");
                var tindex = $("#"+mydivid).attr("currentIndex");
                tindex = tindex==0?0:tindex+1;
                for (var i = tindex; i < num; i++) {
                    var td = tds[i];
                    $(td).find("img").attr("src","images\/star_empty.png");
                }
                $("#"+mydivid).attr("currentIndex",num);
            }
        }
        function change1(mydivid,num) {
            if (!isclick) {
                change(mydivid,num);

            }
            else {
                alert("Sorry,You had clicked me!");
            }
        }
        $(function(){
            initEvent('mydiv1');
            initEvent('mydiv2');
        });
        function initEvent(mydivid) {
            //var tableWjx =$("#tableWjx ul li");
            // var items= tableWjx.getElementsByTagName("ul");

            var tds = $("#"+mydivid+" ul li");
            for (var i = 0; i < tds.length; i++) {
                var td = tds[i];
                $(td).live('mouseover',function(){var num = $(this).attr("num");change(mydivid,num);});
                //$(td).live('mouseout',function(){var num = $(this).attr("num");repeal(mydivid,num);});
                $(td).live('click',function(){var num = $(this).attr("num");change1(mydivid,num);});
            }
        }
    </script>
    <style type="text/css">
        ul{
           list-style-type: none;
        }
        .star_ul li{
            float:left;
        }
    </style>
</head>
<body>
<div id="mydiv1" currentIndex="0"><ul class="star_ul"><li num="1"><img src="images/star_empty.png" class="xing_hui"/></li><li num="2"><img src="images/star_empty.png"  class="xing_hui"/></li><li num="3"><img src="images/star_empty.png"  class="xing_hui"/></li><li num="4"><img src="images/star_empty.png"  class="xing_hui"/></li><li num="5"><img src="images/star_empty.png"  class="xing_hui"/></li></ul></div>
<div id="mydiv2" currentIndex="0"><ul class="star_ul"><li num="1"><img src="images/star_empty.png"/></li><li num="2"><img src="images/star_empty.png"/></li><li num="3"><img src="images/star_empty.png"/></li><li num="4"><img src="images/star_empty.png"/></li><li num="5"><img src="images/star_empty.png"/></li></ul></div>
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:35054次
    • 积分:834
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:7篇
    • 译文:0篇
    • 评论:2条
    最新评论