仿淘宝的结构新改的星星打分

最新推荐文章于 2019-06-11 16:16:24 发布

原创最新推荐文章于 2019-06-11 16:16:24 发布 · 755 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何通过绝对定位和宽度调整实现一个简洁且交互性强的星星评价系统，包括其HTML、CSS和JavaScript实现，以及如何通过点击星星进行评分。

重新改版后，利用绝对定位重叠每个星星的标签，又因为宽度不同，可以划到每个星星，这样只需要拼合2张图片

对应的HTML

对此应用评分  <strong id=”mytitle”>8分</strong>

对应的CSS

.dafen{ position:relative}
ul.rating {width:126px; height:22px; overflow:hidden; position:relative; background: url(../img/star-matrix2.png) no-repeat 0 0;}
ul.rating li a {position:absolute;left:0;top:0px;width:11px;height:22px; overflow:hidden; text-indent:-2000em; position:absolute; text-decoration:none; }
ul.rating li.one a{width:10%; z-index:10}
ul.rating li.two a{width:20%; z-index:9}
ul.rating li.three a{width:30%; z-index:8}
ul.rating li.four a{width:40%; z-index:7}
ul.rating li.five a {width:50%; z-index:6}
ul.rating li.six a{width:60%; z-index:5}
ul.rating li.seven a{width:70%; z-index:4}
ul.rating li.eight a{width:80%; z-index:3}
ul.rating li.nine a{width:90%; z-index:2}
ul.rating li.ten a{width:100%; z-index:1}
ul.rating li a:hover,ul.rating li a.hover{background: url(../img/star-matrix2.png) no-repeat 0 -22px;}

对应的JS//基于JUERY，请自行引入

function star(){
    $(“ul.rating li a”).click(function(){
      var title = $(this).attr(“title”);
   var cl = $(this).parent().attr(“class”);
   var obj= $(this);
       $(“#mytitle”).html(title+”分”);
       obj.addClass(“hover”);
     })}