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

原创 2015年11月19日 11:03:08

代码使用备注:

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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

基于BootStrap的仿淘宝星星商品评价案例

基于BootStrap的仿淘宝星星商品评价案例 /* 向左的箭头 */ .glyphicon{ cursor:...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

html+css+js实现类淘宝星级宝贝评价系统

1.先上效果图 鼠标悬浮效果 鼠标点击效果 点击后把鼠标移开依旧会恢复上次的评分 2.准备部分     1.提示框倒三角的实现     看这张图片 颜色比较丑。我们实现很多地方都要用到这种...
  • Shsgear
  • Shsgear
  • 2016年11月04日 19:47
  • 2507

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

WebApp图标导航HTML5实例-支持手机左右滑动

WebApp图标导航实例 .swipe { overflow: hidden; visibility: hidden; ...

使用 HTML5 开发 WebApp 性能注意点

PhoneGap HTML5 应用简介 PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android...

jquery 商品评论 星星点击 事件

五角星可以在iconfont.cn上面找, 名字分别为: 五角星(满)、五角星(空) 代表空星星  代表实心星星html 代码  &...

HTML5实现webApp中图片轮播的效果(一)之基本使用

最近开始用h5做一款BBS类的webapp,做好后嵌入公司的其他几个Android或ios应用中,这差不多算是混编开发了吧 在我看来,原生app和webapp各有优缺点,原生应用赢在稳定性好、用户体...

【WebApp】使用jquerymobile制作的HTML5 Web App

前言 0.什么是jquery mobile ? jQuery Mobile 是创建移动 web 应用程序的框架; 适用于所有流行的智能手机和平板电脑。 1.什么项目? 提供天气查询和公交信息查...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:通用商品/商家星星评价HTML-支持webapp使用
举报原因:
原因补充:

(最多只允许输入30个字)