前端用Sass实现星级评定效果，简单快捷实现星级切换。

假设一个事物的评级分为五个等级，后台传等级的数据过来，比如是3，那么前端应该实现3颗星星的评定效果，相信各位都遇到过或者有想过星级评定效果如何实现。

下面给大家带来Sass的一种实现方式。star-span-3中的3可根据后台传过来的数据更改，星星active个数将显示为对应的个数。

举例：以下class="star-span-3"的运行效果为：

一：HTML结构：

<span class="star-span-3"><i></i><i></i><i></i><i></i><i></i>
</span>

二：Sass代码

.star-span-0{margin-top: 10px;display: inline-block;i{display: inline-block;width:27px;height: 25px;background-repeat:no-repeat;background-image:url(icon_star.png);}
}
@for $i from 1 through 5{.star-span-#{$i} {margin-top: 10px;display: inline-block;i{display: inline-block;width:27px;height: 25px;background-repeat:no-repeat;background-image:url(icon_star.png);}@for $j from 1 through $i {i:nth-child(#{$j}){background-image:url(icon_star_active.png);}}}
}

使用到的image：

以上只是实现方式之一，期待各位分享更好的实现方式。

前端用Sass实现星级评定效果，简单快捷实现星级切换。相关推荐

js实现仿淘宝商品评价的星级评定效果
HTML: <div class="shop-rating"><span class=&q ...
vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格
vue2.0+stylus实现星级评定组件,computed计算属性实现全星半星,多种星星规格使用方法如下:(size为星星的大小,score为评分,比如传4.5,则4.5颗星亮:传4.1则四颗星亮 ...
php mysql 星级评分_jQuery+PHP实现星级评分效果
码农公社 210.net.cn 210= 1024 10月24日一个重要的节日--码农(程序员)节 jQuery+PHP实现星级评分效果,评分功能比较常用,例如商城平台就会有个评分功能,本实例就 ...
前端 JavaScript 之『节流』的简单代码实现
前戏首先,总结一下上一篇文章--<前端 JavaScript 之『防抖』的简单代码实现>的内容:「防抖」就是在高频率触发事件停止触发后,延时执行某个处理逻辑. 防抖虽然在一定程度上对性能 ...
html前端实现led样式数字的效果（数码管效果展示数据）
前端实现led样式数字的效果前言效果图实现代码使用方式 html代码该工具类使用面向对象的思想来实现该功能:而我认为每一个数字是应该对象,即"123"是应该对象,&quo ...
移动端星级评分效果的实现
星级评分在网页当中是经常用到的,今天特地用原生的JS实现了在移动端中的星级评分效果.由于在移动端中是没有鼠标事件的,所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同,就是要把相应的事件转成 ...
用css实现星级评分效果
以前看到其他网站实现的实现的星级评分效果,没在意那么多,直到昨天做一个页面需要这个功能效果时,发现自己实现起来还是这么困难,折腾了半天才弄出来. 1. 其实主要是利用背景图片的切换位置来实现星级的效果 ...
dw在php图片滑动切换效果,超简单的图片左右切换滑动
网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现.插件虽方便,但是对于新手的学习并不是最好的.本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能效果预览 ...
html css星级评分,纯css实现星级评分效果
效果效果图如下星级评分实现思路: 5个类型为radio的input,abel标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字点击星星有放大旋转的动画 dom结构用form ...

前端用Sass实现星级评定效果，简单快捷实现星级切换。

前端用Sass实现星级评定效果，简单快捷实现星级切换。相关推荐

最新文章

热门文章