非常漂亮的css星级效果总结第1/2页
用纯css打造星级评分效果正在被越来越多地应用在网络RIA中,结合ajax等技术,可以渲染出很出色的视觉效果和很棒的用户体验,在这篇文章开始之前,大家可以先去cssheaven感受一下。
最近由于项目需要,我在网上找了很多css星级评分的例子和说明,但是发现大多数都是翻译国外的文章,而且解释得并不是非常清楚,所以我决定自己来做一个总结,也希望能够给大家一些帮助。
首先用中文写一下这个效果的算法:
1. 使用背景图片的位置切换来获得星级效果;
2. 整个效果最关键的地方就是“三层理论”,整个效果分为三层——空分层、分数层和打分层,三层的布局均为absolute,以避免ul本身自带的相对布局(当然用div也可以获得同样效果);
3. 空分层就是使用背景图片中的“空星”作为背景,并横向平铺;
4. 分数层的宽度等于(分数*图片宽度)得到的数值,并且使用背景图片中的“分数星(例子中为黄色)”作为背景横向平铺;
5. 打分层就是将5个空链接置于5个星星的位置上(宽度要和背景图片吻合),并将5个a:hover的背景设为“打分星(这里为绿色)”,宽度设为星数*图片宽度,left为0(靠左,这样结合a:hover不同的宽度就可以出现打分效果),垂直坐标小于a的垂直坐标(以确保当前a:hover不会遮挡住其他链接);
当前1/2页 12下一页阅读全文
相关推荐
-
javascript 星级评分效果(手写)
今天上午抽空随手写了个星级评分的效果,给大家分享下.由于水平有限,如有问题请指出. 首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态.如图: 最后附上代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>javascript星级评分</title> <style
-
jQuery满意度星级评价插件特效代码分享
这是一款基于jQuery 的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计. 为大家分享的jQuery满意度星级评价插件特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>满意度jQuery星级评分插件</title> <
-
JS实现带提示的星级评分效果完整实例
本文实例讲述了JS实现带提示的星级评分效果.分享给大家供大家参考,具体如下: 这是一款JS仿淘宝网的星级评分系统,鼠标放在上边可以显示星级代表的评分级别,鼠标点击时会选中当前的星级,目前此功能在网页上十分流行,虽然是仿做的,但已经很不错的功能了,希望大家喜欢! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-start-level-pf-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
-
jquery插件star-rating.js实现星级评分特效
特效介绍 jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分.点击减号,分数置为0.不兼容IE8以下的浏览器. 演示图 使用方法 第一步.引入下面的代码: 复制代码 代码如下: <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script s
-
jQuery基于图层模仿五星星评价功能的方法
本文实例讲述了jQuery基于图层模仿五星星评价功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
用css制作星级评分第1/3页
原文:Creating a Star Rater using CSS 链接:http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/ 版权:版权归原作者所有,翻译文档版权归本人|greengnn,和blueidea. 先看看效果 Step 1: XHTML <ul class="star-rating"> <li><a href="
-
jquery星级插件、支持页面中多次使用
效果图如下: css所需背景图片: 二话不说,帖代码: html代码 复制代码 代码如下: <div class="xing"> <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font></span><div class="rating-wrap">
-
jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现星级评分,你需要动态程序配合,如ASP/PHP等,以便将评分值存入数据库. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
-
js实现简单的星级选择器提交效果适用于评论等
星级选择器,提交代码适用于评论等 没有用到js库,就是单独的js代码 复制代码 代码如下: <form action="" method="get"> <div id="star_level" star_width="14"> <p>服务</p> <ul class="star_rating"> <li style="displ
-
基于jQuery的星级评分插件
首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮.一.原理 本程序的原理是这样的:一个"ul"标签,该标签的背景为灰色的星星,控制"ul"标签的宽度显示星星的数量.例如:一个星星图片的宽度为23px,那么要显示10个星星,则"ul"的宽度为230px就可以显示10个星星. n个"li"标签,n表示您要显示星星的个数,例如你要显示10个星星那么将有10个
-
使用jQuery实现星级评分代码分享
前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. 复制代码 代码如下: <div class="star"> <span>jQuery星级评论打分</span> <ul> <li><a href="javascript:;">1</a></li> <li><a href="javascrip
-
javascript实现五星评价代码(源码下载)
废话不多说,先上个效果图: 查看演示 源码下载 javascript中的代码 var spans=document.getElementsByTagName("span"); var flag=5;//这个值随便取,只要不是01234就行 var Expand=function(){ //扩展代码,暂无 }; onload=function(){ //循环载入鼠标移入事件 for(var i=0;i<spans.length;i++){ spa
-
javascript实现五星评分功能
本文为大家分享了javascript实现五星评分功能的实例代码,大家可以参考学习一下,具体的实现办法如下 在分享javascript实现五星评价功能的实例代码之前,先看一看效果图: star1.png star1.png 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53</
随机推荐
- 判断所使用的浏览器不仅仅是电脑浏览器代码整理
- windows server2016安装MySQL5.7.19解压缩版教程详解
- CenterOS 中安装Redis及开机启动设置详解
- Spring Boot多数据源及其事务管理配置方法
- 提高JavaScript执行效率的23个实用技巧
- JS实现图片剪裁并预览效果
- Session服务器配置指南与使用经验的深入解析
- Python中的并发编程实例
- python常规方法实现数组的全排列
- python基于xml parse实现解析cdatasection数据
- Sersync+Rsync实现触发式文件同步实战过程
- android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍
- docker指令收集整理(收藏)
- 千万要避免的五种程序注释方式小结
- jquery选择器原理介绍($()使用方法)
- 使用javascript插入样式
- Glide实现加载图片显示进度条效果
- Android提高之SQLite分页表格实现方法
- 轻松掌握MySQL函数中的last_insert_id()
- Angular简单验证功能示例