`
pcajax
  • 浏览: 2163048 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

纯CSS星级评价

阅读更多

 

做一个星级评价的功能不是很难,但是要单纯用CSS写估计就有点难度了,先来个截图:

效果很简单,可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法:

CSS:

以下为引用的内容:

          .jsstar
        
{   list-style: none;
            margin
: 0px;
            padding
: 0px;
            width
: 100px;
            height
: 20px;
            position
: relative;
            
            
}
         .jsstar li  
         
{
            padding
:0px;
            margin
: 0px; 
            float
: left; 
            width
:20px;
            height
:20px;
            background
:url(star_rating.gif) 0 0 no-repeat;
            
}  

HTML:

以下为引用的内容:

<p>Javascript + CSS实现</p>
<ul class="jsstar">
    
<li title="一星"></li>
    
<li title="二星"></li>
    
<li title="三星"></li>
    
<li title="四星"></li>
    
<li title="五星"></li>
</ul>

JS:(我用的是jquery)

以下为引用的内容:

<script type="text/javascript" src="jquery-1.3.1.js"></script>

    
<script type="text/javascript">
    $(document).ready(
function(){
        $(
".jsstar >li").hover(
            
function(){$(this).css({"background-position":"left bottom"}).prev().trigger("mouseover")},
            
function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
        .click(
function(){alert($(this).attr("title"))});     
    });
    
</script>

这里是效果图:

这里是效果图:

是不是和上面的没什么区别,可是又一想如果用户禁掉了javascript岂不是效果很惨?

于是我们想到了用纯CSS实现,下面是代码:

CSS:

以下为引用的内容:

 1 /*CSS Star start*/
 2         .star-rating
 3         {
 4             list-style: none;
 5             margin: 0px;
 6             padding: 0px;
 7             width: 100px;
 8             height: 20px;
 9             position: relative;
10             background: url(star_rating.gif) top left repeat-x;
11         }
12         .star-rating li
13         {
14             padding: 0px;
15             margin: 0px; 
16             float: left; 
17         }
18         .star-rating li a
19         {
20             display: block;
21             width: 20px;
22             height: 20px;
23             text-decoration: none;
24             text-indent: -9000px;
25             z-index: 20;
26             position: absolute;
27             padding: 0px;
28         }
29         .star-rating li a:hover
30         {
31             background: url(star_rating.gif) left bottom;
32             z-index: 1;
33             left: 0px;
34         }
35         .star-rating a.one-star
36         {
37             left: 0px;
38         }
39         .star-rating a.one-star:hover
40         {
41             width: 20px;
42         }
43         .star-rating a.two-stars
44         {
45             left: 20px;
46         }
47         .star-rating a.two-stars:hover
48         {
49             width: 40px;
50         }
51         .star-rating a.three-stars:hover
52         {
53             width: 60px;
54         }
55         .star-rating a.three-stars
56         {
57             left: 40px;
58         }
59         .star-rating a.four-stars
60         {
61             left: 60px;
62         }
63         .star-rating a.four-stars:hover
64         {
65             width: 80px;
66         }
67         .star-rating a.five-stars
68         {
69             left: 80px;
70         }
71         .star-rating a.five-stars:hover
72         {
73             width: 100px;
74             
75         }

HTML:

以下为引用的内容:

<ul class='star-rating'>
  
<li><href='#' title='一星' class='one-star'>1</a></li>
  
<li><href='#' title='二星' class='two-stars'>2</a></li>
  
<li><href='#' title='三星' class='three-stars'>3</a></li>
  
<li><href='#' title='四星' class='four-stars'>4</a></li>
  
<li><href='#' title='五星' class='five-stars'>5</a></li>
</ul>

看看上面CSS的行号您是不是吓了一跳,这么简单的效果竟然用了这么多代码?在我看来不用JS就只能一个效果一个样式了,如果您还有更简单更炫的效果请指教!

示例代码下载

分享到:
评论

相关推荐

    炫酷纯CSS3星级评分动画特效

    "炫酷纯CSS3星级评分动画特效"就是一种能够提升网站互动性和吸引力的技术应用。这个特效库,名为"starability.css",专为创建动态、吸引人的星级评分系统而设计,无需依赖JavaScript或者其他复杂的编程语言,完全...

    CSS 星级评价效果代码

    CSS星级评价的关键在于利用背景图像(在这里是`star_rating.gif`)的平铺和定位,以及利用浮动和绝对定位来排列和展示星星。这种技术在网页设计中常见,因为它允许我们创建交互式的视觉元素,同时保持HTML结构清晰,...

    纯css实现的星级评分系统.rar

    本项目名为“纯css实现的星级评分系统”,它着重于利用CSS(层叠样式表)技术来创建这样的交互功能,而不依赖JavaScript(JS)特效。这种纯CSS的方法有其独特优势,如减少对JavaScript的依赖,简化代码,以及优化...

    多个CSS3实现的动画效果不错的星级评分效果

    在本主题中,我们将深入探讨如何使用CSS3来创建动态且引人注目的星级评分效果。...这样,你就成功地使用纯CSS3创建了一个动态的星级评分系统,为用户提供了一种直观且有趣的互动方式来表达他们的评价。

    h5 web星级评价

    总结来说,“h5 web星级评价”项目涵盖了Web前端开发的多个方面:HTML结构设计、CSS样式布局和交互逻辑的JavaScript实现。通过学习和实践这个项目,开发者能够提升在移动端创建互动星级评价组件的能力,为用户提供...

    纯css实现的星级评分系统特效代码

    【标题】"纯CSS实现的星级评分系统特效代码"是一个关于使用CSS技术创建交互式星级评分系统的主题。...通过理解和应用这些知识点,开发者可以创建出一个功能完备且具有良好用户体验的纯CSS星级评分系统。

    利用css制作的星级评分效果.rar_many7y7_利用css制作的星级评分效果

    5. **交互与JavaScript**:虽然纯CSS可以实现静态的星级评分效果,但若要实现点击评分或半星选择等功能,可能需要结合JavaScript。通过监听事件,比如`click`,可以更新评分状态并可能与后端进行数据交互。 在这个...

    CSS3鼠标点击星级评价特效

    点击功能的实现则需要JavaScript的配合,但这里的“CSS3鼠标点击星级评价特效”特别之处在于,它强调了纯CSS实现。虽然CSS本身不具备监听点击事件的能力,但我们可以通过CSS的`:checked`伪类和关联的`input[type=...

    js+html星级评分(支持半星)

    在JavaScript和HTML中实现星级评分系统,特别是支持半星显示,是常见的用户界面功能,用于让用户对产品或服务进行评价。这个系统的核心在于利用JavaScript动态改变HTML元素的样式,以展示用户选择的星级数。以下将...

    纯css写的评分鼠标移入的效果附图

    标题中的“纯css写的评分鼠标移入的效果附图”指的是使用纯CSS实现的星级评分系统,当鼠标悬停在星标上时,可以显示被选中的星级效果。这个功能常见于用户评价、商品评分等场景,能够提供直观的视觉反馈。 在描述中...

    星星评分 星级 五星评分

    "星星评分 星级 五星评分"这个主题聚焦于一种常见的评分方式——星级评分系统,它通常由一到五星表示,五星代表最高评价。在Web开发中,实现这样的功能主要依赖JavaScript(js)技术。 首先,我们要理解星级评分的...

    简洁的jQuery星级评论表单代码

    这些星星可能是图片、字体图标或者纯CSS绘制的图形。通过设置这些元素的初始状态(如默认选中多少颗星),可以展示预设的评分。 JavaScript部分,特别是jQuery,是实现动态效果的关键。例如,当用户鼠标悬停在星星...

    customizedStarRating:现在设计星级评分屏幕,而不会与CSS或第三方插件产生任何混乱

    在开发Web应用时,用户界面的设计至关重要,尤其是评价系统中的星级评分。`customizedStarRating` 是一个专为实现无CSS、无第三方插件的星级评分屏幕设计的解决方案。这个项目的目标是帮助开发者轻松地在应用程序中...

    五星评价js原生代码

    在不依赖任何外部JavaScript库或框架的情况下,我们可以使用纯JavaScript原生代码来实现这一功能。这种做法的优点是避免了额外的HTTP请求,减小了页面加载时间,同时也提高了代码的可控性和可维护性。 【描述】"不...

    star_reyting:星级(3个解决方案)

    纯CSS实现星级评级系统主要利用伪类和伪元素来创建可交互的星级。通过设置`::before`和`::after`,我们可以为每个星星创建一个图标,并通过改变其透明度或颜色来显示不同的选中状态。这种方法的优点是无JavaScript...

    Star-Review:仅使用Vanilla Javascript进行星级审查

    "Star-Review:仅使用Vanilla JavaScript进行星级审查"这个项目,旨在教你如何不依赖任何库或框架,仅仅使用原生JavaScript来创建一个功能完整的星级评价系统。 首先,让我们深入了解一下Vanilla JavaScript。这个词...

    星星打分,评分javascript特效源码

    星星打分和评分JavaScript特效是网页交互中常见的一种设计,常用于用户对产品或服务进行评价。这种特效可以通过JavaScript库,如jQuery,或者纯JavaScript代码实现。本源码可能提供了一种实现方式,让我们来详细探讨...

    星级评分插件RatingStars

    你可以自由改变星星的样式,无论是图片、字体图标还是纯CSS绘制。比如,使用Font Awesome的图标: ```html .star { font-family: 'Font Awesome 5 Free'; display: inline-block; margin-right: 5px; } .star:...

    molistar

    然后,通过JavaScript(如果需要动态交互)或纯CSS(如果仅需静态展示)来处理用户的点击事件和评分逻辑。 在实际应用中,开发者可能会遇到以下一些技术点: 1. CSS选择器:理解如何使用类选择器、伪类选择器(如`:...

Global site tag (gtag.js) - Google Analytics