1.我们都知道,无论是淘宝、京东甚至一些很小的博客,但凡是涉及到评论。都会看到选择星星。那么我们如何去模拟这种评论呢?
我们以一排5个星星为例:
1.html代码:
<span><i class="star"></i></span> <span><i class="star"></i></span> <span><i class="star"></i></span> <span><i class="star"></i></span> <span><i class="star"></i></span> 2.css文件 i { display: inline-block; width: 20px; height: 16px; cursor: pointer; } .star { background: url(默认星星图片地址) center center no-repeat; } .star-selected { background: url(点击后的星星图片地址) center center no-repeat; } .star:hover { background: url(鼠标放在星星上的图片地址) center center no-repeat; } .star-selected:hover { background: url(点击后的星星图片地址) center center no-repeat; } 备注:这里是把星星图片当成 <i></i> 的背景图片,其中要有3种样式的图片。3.js片段
$('.star').on('click',function(e) { var $target = $(e.target); $target.addClass('star-selected').prevAll('.star').addClass('star-selected'); $target.nextAll('.star').removeClass('star-selected') }) 这里是一个非常简单的处理方法(基于jquery)
主要是:prevAll(),和nextAll()的用法,有兴趣的同学们可以尝试的去修改去优化。