- 浏览: 2163048 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1878)
- [网站分类]ASP.NET (141)
- [网站分类]C# (80)
- [随笔分类]NET知识库 (80)
- [随笔分类]摘抄文字[非技术] (3)
- [随笔分类]养生保健 (4)
- [网站分类]读书区 (16)
- [随笔分类]赚钱 (7)
- [网站分类].NET新手区 (233)
- [随笔分类]网站 (75)
- [网站分类]企业信息化其他 (4)
- [网站分类]首页候选区 (34)
- [网站分类]转载区 (12)
- [网站分类]SQL Server (16)
- [网站分类]程序人生 (7)
- [网站分类]WinForm (2)
- [随笔分类]错误集 (12)
- [网站分类]JavaScript (3)
- [随笔分类]小说九鼎记 (69)
- [随笔分类]技术文章 (15)
- [网站分类]求职面试 (3)
- [网站分类]其他技术区 (6)
- [网站分类]非技术区 (10)
- [发布至博客园首页] (5)
- [网站分类]jQuery (6)
- [网站分类].NET精华区 (6)
- [网站分类]Html/Css (10)
- [随笔分类]加速及SEO (10)
- [网站分类]Google开发 (4)
- [随笔分类]旅游备注 (2)
- [网站分类]架构设计 (3)
- [网站分类]Linux (23)
- [随笔分类]重要注册 (3)
- [随笔分类]Linux+PHP (10)
- [网站分类]PHP (11)
- [网站分类]VS2010 (2)
- [网站分类]CLR (1)
- [网站分类]C++ (1)
- [网站分类]ASP.NET MVC (2)
- [网站分类]项目与团队管理 (1)
- [随笔分类]个人总结 (1)
- [随笔分类]问题集 (3)
- [网站分类]代码与软件发布 (1)
- [网站分类]Android开发 (1)
- [网站分类]MySQL (1)
- [网站分类]开源研究 (6)
- ddd (0)
- 好久没写blog了 (0)
- sqlserver (2)
最新评论
-
JamesLiuX:
博主,能组个队么,我是Freelancer新手。
Freelancer.com(原GAF – GetAFreelancer)帐户里的钱如何取出? -
yw10260609:
我认为在混淆前,最好把相关代码备份一下比较好,不然项目完成后, ...
DotFuscator 小记 -
日月葬花魂:
大哥 能 加我个QQ 交流一下嘛 ?51264722 我Q ...
web应用程序和Web网站区别 -
iaimg:
我想问下嵌入delphi写的程序总是出现窗体后面感觉有个主窗体 ...
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部 -
iaimg:
代码地址下不了啊!
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部
效果很简单,可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法:
CSS:
以下为引用的内容: .jsstar |
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> |
这里是效果图:
这里是效果图:
是不是和上面的没什么区别,可是又一想如果用户禁掉了javascript岂不是效果很惨?
于是我们想到了用纯CSS实现,下面是代码:
CSS:
以下为引用的内容: 1 /*CSS Star start*/ |
HTML:
以下为引用的内容: <ul class='star-rating'> |
看看上面CSS的行号您是不是吓了一跳,这么简单的效果竟然用了这么多代码?在我看来不用JS就只能一个效果一个样式了,如果您还有更简单更炫的效果请指教!
发表评论
-
常用Web Service汇总(天气预报、时刻表等)
2010-07-15 23:10 939下面总结了一些常用的Web Service,是平时乱逛时收集的 ... -
常用Web Service汇总(天气预报、时刻表等)
2010-07-15 23:10 843下面总结了一些常用的Web Service,是平时乱逛时收集的 ... -
读blog小记
2009-11-06 10:13 7511.Google Books开始收录更多杂志,全部内容都可浏览 ... -
.NET 产品版权保护方案 (.NET源码加密保护)
2009-12-28 15:18 975说明:你希望自己用.net ... -
[转]CTO谈豆瓣网和校内网技术架构变迁
2009-12-29 11:05 980<!--done--> 豆瓣网CTO洪强 ... -
iframe框架页面实现自适应高度解决方案
2010-01-07 19:24 1043经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根 ... -
数据采集基类[转]
2010-01-12 18:01 842using System;using System.Data; ... -
.NET牛人应该知道些什么(转)?
2010-01-13 10:52 865何一个使用.NET的人 描述线程与进程的区别? 什么是Wi ... -
cuteEditor 配置
2010-01-13 23:54 15341、拷贝文件 (1)将CuteEditor、Bin文件夹下 ... -
关于伪静态和真静态的一点心得
2010-01-16 23:30 12131.关于伪静态的用处 ... -
认证,授权2
2010-01-18 10:45 913以前对这部分一直糊涂着,总算理理清楚了包名:System.Se ... -
关于集合类的做法示例 实体类赋值 cnblogs
2010-01-22 10:31 958关于集合类的做法 ... -
无法在Web服务器上启动调试。与Web服务器通信时出现身份验证错误
2010-01-29 14:46 676使用Visual Studio 2005(Visu ... -
Godaddy自带免费10G空间开通完全教程
2010-01-29 23:56 1072在Godaddy注册的域名都会自带一个免费的10G空间,虽然有 ... -
无法在Web服务器上启动调试。与Web服务器通信时出现身份验证错误
2010-01-29 14:46 864使用Visual Studio 2005(Visu ... -
Godaddy自带免费10G空间开通完全教程
2010-01-29 23:56 691在Godaddy注册的域名都会自带一个免费的10G空间,虽然有 ... -
关于伪静态和真静态的一点心得
2010-01-16 23:30 7971.关于伪静态的用处 ... -
认证,授权2
2010-01-18 10:45 850以前对这部分一直糊涂着,总算理理清楚了包名:System.Se ... -
关于集合类的做法示例 实体类赋值 cnblogs
2010-01-22 10:31 971关于集合类的做法 ... -
无法在Web服务器上启动调试。与Web服务器通信时出现身份验证错误
2010-01-29 14:46 1076使用Visual Studio 2005(Visu ...
相关推荐
"炫酷纯CSS3星级评分动画特效"就是一种能够提升网站互动性和吸引力的技术应用。这个特效库,名为"starability.css",专为创建动态、吸引人的星级评分系统而设计,无需依赖JavaScript或者其他复杂的编程语言,完全...
CSS星级评价的关键在于利用背景图像(在这里是`star_rating.gif`)的平铺和定位,以及利用浮动和绝对定位来排列和展示星星。这种技术在网页设计中常见,因为它允许我们创建交互式的视觉元素,同时保持HTML结构清晰,...
本项目名为“纯css实现的星级评分系统”,它着重于利用CSS(层叠样式表)技术来创建这样的交互功能,而不依赖JavaScript(JS)特效。这种纯CSS的方法有其独特优势,如减少对JavaScript的依赖,简化代码,以及优化...
在本主题中,我们将深入探讨如何使用CSS3来创建动态且引人注目的星级评分效果。...这样,你就成功地使用纯CSS3创建了一个动态的星级评分系统,为用户提供了一种直观且有趣的互动方式来表达他们的评价。
总结来说,“h5 web星级评价”项目涵盖了Web前端开发的多个方面:HTML结构设计、CSS样式布局和交互逻辑的JavaScript实现。通过学习和实践这个项目,开发者能够提升在移动端创建互动星级评价组件的能力,为用户提供...
【标题】"纯CSS实现的星级评分系统特效代码"是一个关于使用CSS技术创建交互式星级评分系统的主题。...通过理解和应用这些知识点,开发者可以创建出一个功能完备且具有良好用户体验的纯CSS星级评分系统。
5. **交互与JavaScript**:虽然纯CSS可以实现静态的星级评分效果,但若要实现点击评分或半星选择等功能,可能需要结合JavaScript。通过监听事件,比如`click`,可以更新评分状态并可能与后端进行数据交互。 在这个...
点击功能的实现则需要JavaScript的配合,但这里的“CSS3鼠标点击星级评价特效”特别之处在于,它强调了纯CSS实现。虽然CSS本身不具备监听点击事件的能力,但我们可以通过CSS的`:checked`伪类和关联的`input[type=...
在JavaScript和HTML中实现星级评分系统,特别是支持半星显示,是常见的用户界面功能,用于让用户对产品或服务进行评价。这个系统的核心在于利用JavaScript动态改变HTML元素的样式,以展示用户选择的星级数。以下将...
标题中的“纯css写的评分鼠标移入的效果附图”指的是使用纯CSS实现的星级评分系统,当鼠标悬停在星标上时,可以显示被选中的星级效果。这个功能常见于用户评价、商品评分等场景,能够提供直观的视觉反馈。 在描述中...
"星星评分 星级 五星评分"这个主题聚焦于一种常见的评分方式——星级评分系统,它通常由一到五星表示,五星代表最高评价。在Web开发中,实现这样的功能主要依赖JavaScript(js)技术。 首先,我们要理解星级评分的...
这些星星可能是图片、字体图标或者纯CSS绘制的图形。通过设置这些元素的初始状态(如默认选中多少颗星),可以展示预设的评分。 JavaScript部分,特别是jQuery,是实现动态效果的关键。例如,当用户鼠标悬停在星星...
在开发Web应用时,用户界面的设计至关重要,尤其是评价系统中的星级评分。`customizedStarRating` 是一个专为实现无CSS、无第三方插件的星级评分屏幕设计的解决方案。这个项目的目标是帮助开发者轻松地在应用程序中...
在不依赖任何外部JavaScript库或框架的情况下,我们可以使用纯JavaScript原生代码来实现这一功能。这种做法的优点是避免了额外的HTTP请求,减小了页面加载时间,同时也提高了代码的可控性和可维护性。 【描述】"不...
纯CSS实现星级评级系统主要利用伪类和伪元素来创建可交互的星级。通过设置`::before`和`::after`,我们可以为每个星星创建一个图标,并通过改变其透明度或颜色来显示不同的选中状态。这种方法的优点是无JavaScript...
"Star-Review:仅使用Vanilla JavaScript进行星级审查"这个项目,旨在教你如何不依赖任何库或框架,仅仅使用原生JavaScript来创建一个功能完整的星级评价系统。 首先,让我们深入了解一下Vanilla JavaScript。这个词...
星星打分和评分JavaScript特效是网页交互中常见的一种设计,常用于用户对产品或服务进行评价。这种特效可以通过JavaScript库,如jQuery,或者纯JavaScript代码实现。本源码可能提供了一种实现方式,让我们来详细探讨...
你可以自由改变星星的样式,无论是图片、字体图标还是纯CSS绘制。比如,使用Font Awesome的图标: ```html .star { font-family: 'Font Awesome 5 Free'; display: inline-block; margin-right: 5px; } .star:...
然后,通过JavaScript(如果需要动态交互)或纯CSS(如果仅需静态展示)来处理用户的点击事件和评分逻辑。 在实际应用中,开发者可能会遇到以下一些技术点: 1. CSS选择器:理解如何使用类选择器、伪类选择器(如`:...