关于js的常用示例

    xiaoxiao2022-06-24  35

    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()的用法,有兴趣的同学们可以尝试的去修改去优化。

    转载请注明原文地址: https://ju.6miu.com/read-1123807.html

    最新回复(0)