有一个场景,相信大家不会感到陌生,那就是我们购物之后对商家、物流、商品等进行评价,其中有一个直观的交互就是星状打分,这种交互方式增强了用户对商品评价的直观感受,更贴近用户的行为习惯,这是一种非常棒的设计。
从技术的角度来说,利用html+css就能完全搞定这种交互效果,好多童鞋都以为是js实现的呢,有木有~~~,哈哈。肯定有.
不得不说,这效果都是从墙外传过来的,我们玩的都是现成。~~~~~~
交互流程:
首先,我们来顺一下这个交互的流程~~~
- 待打分状态,5个空心的五角星
- 鼠标滑过每颗星,显示分值预览效果,
- 已打分状态,你打了3分,那显示的效果就是前三颗星呈打分状态
实现思路:
- 鼠标移动到第一颗星上即:a:hover,我们可以利用background-position来得到想要的效果,这个很简单
- 鼠标移动到第二颗星,我们怎么让第一颗星也显示黄色的星星呢,鼠标移动到第3颗星,我们怎么让前三颗星都是黄色状态呢,这个问题得好好考虑,我们以第三颗星为例,鼠标移动到第三颗星,要让前两颗星都同时呈现黄色状态,除非我们把第三颗星的宽度加宽,宽到能覆盖前两颗星,然后利用第三颗星的黄色背景平铺来制造一个前两颗星都呈黄色的假象。
- 还有一个问题是 我们怎么从第三颗星的hover状态顺利切换到第二颗星呢,这就需要z-index来实现,z-index能实现层次关系,只有把a全部置于最高层,a:hover置于次顶层,这样才能实现a:hover和a的随意切换。
- 还有一个状态我们需要考虑,如果目前呈现的是4颗星,而我们在即将打2分,就是鼠标移到第二颗星上进行打分,那么第三颗星,和第四颗星都是呈现被打分状态,这样就总共出现了3种状态,给人的感觉就是不干净,感觉有点怪怪的,不过我们可以利用a:hover把第二颗星的宽带加宽到5颗星的宽度,这样第二颗星就能控制整个5颗星的显示了。这是一个不错的技巧。
技术要点:
- 利用a标签的hover来进行状态的改变
- 利用css的background-position来进行不同背景的改变
- 利用css的定位来实现位置的固定
- 最重要的:z-index,来进行层次的固定,从a1的hover切换到a2的hover,就得靠这个。
实现流程:
- 准备结构清晰的html代码:
1 |
< ul class = "rating nostar" >
|
2 |
< li class = "one" >< a title = "1 Star" href = "#" >1</ a ></ li >
|
3 |
< li class = "two" >< a title = "2 Stars" href = "#" >2</ a ></ li >
|
4 |
< li class = "three" >< a title = "3 Stars" href = "#" >3</ a ></ li >
|
5 |
< li class = "four" >< a title = "4 Stars" href = "#" >4</ a ></ li >
|
6 |
< li class = "five" >< a title = "5 Stars" href = "#" >5</ a ></ li >
|
- 接下来,我们实现显示分值状态,即待打分状态和已打分状态,我们统称为分值状态,那么分值状态我们怎么实现呢? 其实很简单,只要改变<ul>的背景就能实现,事先要准备这样一张图片背景图片,这张图片就代表了6种不同的状态,分别是0分(待打分),1分、2分、3分、4分、5分,6种状态,6个对应的class:.nostar,.onestar,.twostar,.threestar,.fourstar,.fivestar,
- 接下来我们实现交互,就是hover状态,基于各浏览器兼容情况考虑,我们选择支持最好的a:hover,即每个交互元素应该是a元素,要触发不同的a:hover,我们就要排布a的位置,这里可以用定位来实现,每颗星width=16px来计算的话,我们可以得到如下的css:
现在,位置已经排好了,鼠标就能随时的触发hover了,下一步就要实现a:hover的效果。
1 |
ul.rating li.one a { left : 0 }
|
2 |
ul.rating li.two a { left : 16px ;}
|
3 |
ul.rating li.three a { left : 32px ;}
|
4 |
ul.rating li.four a { left : 48px ;}
|
5 |
ul.rating li.five a { left : 64px ;}
|
7 |
position : absolute ; left : 0 ; top : 0 ; width : 16px ; height : 16px ; text-decoration : none ; z-index : 200 ;
|
- 我们也要像第二步一样,要准备几张不同的状态背景图,即:,第一个a对应1分,第二个a对应2分,以此类推,第5个a对应5分,但是有个要点是值得注意的,a:hover时width设置为5颗星的宽度,而且z-index必须比a的z-index低,例如:a{z-index:20;},a:hover{z-index:10},只要这样才能轻易的在不同a之间切换,如果a:hover的z-index高于a的z-index,那么鼠标移动到a上 ,我们永远切换不到另一个a上,因为另外4个a被当前a所覆盖了,这一点是这个效果最核心的技巧。
- 对于背景图片来说,我们最好整合到一张图片里,最终的背景是:
好了,这个效果到这里就算完成了,里边用到的技巧都是很灵活的,让你有一种茅塞顿开的感觉,有木有~~,比如a:hover从平时的改变颜色,加个下划线,到这里就变成了改变left,改变width这样的位置属性,这大大拓展了我们的思路,不得不说外国人的创新意识真的比国人强。
DEMO: http://classjs.com/demo/star/star.html
分享到:
相关推荐
Bootstrap Star Rating插件是一款...总的来说,Bootstrap Star Rating插件凭借其易用性和灵活性,成为实现星级评分功能的首选工具。无论你是新手还是经验丰富的开发者,都可以轻松地将它整合到项目中,提升用户体验。
这种效果可以通过CSS(层叠样式表)轻松实现,为用户提供直观且吸引人的视觉反馈。下面我们将深入探讨如何使用CSS来创建一个具有互动性的星型投票系统。 首先,我们需要了解基本的HTML结构。一个简单的星型投票系统...
首先,CSS3中的伪类是实现星级评分效果的关键之一。例如,`:hover`、`:checked` 和 `:nth-child()` 这些伪类可以用来控制鼠标悬停、选中状态或特定子元素的状态。通过这些伪类,我们可以定义不同状态下的星级颜色和...
4. **插件配置**:Bootstrap Star Rating支持多种配置选项,如预设初始评分、是否允许半星选择、是否可读取/写入评分等。开发者可以通过在初始化插件时传递JSON对象来定制这些选项。 5. **API接口**:插件提供了API...
Vue Rating Star组件是基于Vue.js设计的一个用于实现星级评分功能的组件。这个组件通常用于评价系统,如电影评分、产品评价或者用户反馈,使得用户可以直观地给出他们的满意度评分。 在Vue Rating Star组件中,主要...
本教程将详细介绍如何实现CSS星星评分效果,以及在实际项目中的应用。 首先,我们需要创建HTML结构。通常,我们会使用`<input type="radio">`配合`<label>`来构建评分系统。每个星星代表一颗星,当用户点击或鼠标...
在本文中,我们将深入探讨如何基于jQuery实现一个功能完善的星级评分效果,这通常用于网站上的用户评价或评分系统。雅虎口碑网的星级评分界面是一个经典的例子,它提供了直观、易于使用的用户体验。以下是对实现这一...
$('input[type="number"]').starRating({ totalStars: 5, // 星星总数 initialRating: 3, // 初始评分 disableAfterRate: false, // 是否允许用户更改已提交的评分 ... }); ``` 更多配置选项可参考插件文档...
jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理、动画效果等功能,使得实现星级评分效果变得更为简便。本教程将深入探讨如何使用jQuery来创建一个动态的星级评分系统。 首先,我们需要理解基本...
当然,这需要CSS配合,定义`star-filled`和`star-empty`类以呈现不同的视觉效果。 为了支持半星,我们可以调整样式,例如使用CSS伪元素`::before`和`::after`来分别显示完整的星星和半个星星,然后根据分数计算出应...
`star-rating-svg`是一款专为此目的设计的jQuery插件,它利用可缩放向量图形(SVG)技术,为用户提供了一种高度自定义且视觉效果优秀的星级评分解决方案。 1. **SVG优势** SVG是一种基于XML的矢量图像格式,具有...
"star_rating"是一个关于实现星状评分系统的项目,利用AJAX技术进行动态更新,从而提供用户友好的交互体验。在Web开发中,这样的系统常见于评价、评分或反馈功能,如电商平台的商品评价、电影评分等场景。以下是这个...
.kv-starrating .k-i-star:before { color: #ccc; /* 更改为所需的未选中颜色 */ } ``` 同样,也可以通过监听`change`事件来响应用户评分的变化,获取或设置新的评分值: ```javascript $('#myRating').on('change...
接下来,为了实现星级评分的视觉效果,我们需引入`jquery.rating.css`和`star.gif`、`delete.gif`等图片资源。`jquery.rating.css`包含了插件的样式规则,用于定义星星的外观和位置。`star.gif`是未选中状态的星星...
3. **初始化插件**:在JavaScript中,通过`$("#yourElement").starRating(options)`来初始化插件,其中`options`是一个包含各种配置参数的对象。 **三、插件功能特性** 1. **默认值和范围**:你可以设置初始的默认...
在网页开发中,星级评分系统是一种常见的用户交互元素,它允许用户对商品、服务或内容进行评价,通常以星形图标表示。本教程将详细讲解如何利用jQuery和PHP技术实现一个简单的星级评分功能。 首先,我们需要理解...
本教程将探讨如何利用jQuery实现一个灵活的星级评分系统,就像你在淘宝等电商平台上看到的那种,用户可以通过点击选择他们对商品的评分等级。这个系统不仅可以显示星星,还可以根据需求替换为其他图标,调整星星的...
本文将详细介绍如何使用JS实现星形评分,并涉及与后端的数据交互。 一、HTML基础布局 首先,我们需要在HTML中创建一个用于展示星级评分的容器。例如: ```html <div id="rating"> <span class="star" data-score...
3. **鼠标悬停效果**:为了让用户能够预览选择的评分,我们可以为每个评分星添加鼠标悬停时的CSS样式。这通常涉及改变被悬停星的背景色或颜色。 4. **交互性**:为了使打分具有交互性,我们可以使用JavaScript或...
4. **半星评分**:如果需要支持半星评分,可以使用CSS的`clip-path`或者额外的元素来创建半星形状。同时,JavaScript逻辑也需要相应调整,以便处理半星的选择。 5. **无障碍性**:确保你的星级评价系统对所有用户都...