给商品评分效果,CSS技巧
像这种给商品评分的效果,基本上所有电商网站都有。这里写这个效果的时候运用到了一些CSS技巧。结合posiiton,z-index,background-p_w_picpath,background-position,overflow,:hover等等多个属性。
<li class="pro_rating">给商品评分:<ul class="rating nostar"><li class="one"><a href="#" title="1分">1</a></li><li class="two"><a href="#" title="2分">2</a></li><li class="three"><a href="#" title="3分">3</a></li><li class="four"><a href="#" title="4分">4</a></li><li class="five"><a href="#" title="5分">5</a></li></ul></li>
.rating{overflow:hidden;width:80px;height:16px;margin:0 0 20px 0;clear:both;background-p_w_picpath:url(../p_w_picpaths/star-matrix.gif);position:relative; } .nostar{background-position:0 0; } .onestar{background-position:0 -16px; } .twostar{background-position:0 -32px; } .threestar{background-position:0 -48px; } .fourstar{background-position:0 -64px; } .fivestar{background-position:0 -80px; } ul.rating li{float:left;cursor:pointer;width:16px;height:16px;text-indent:-999em; } ul.rating li a{display:inline-block;width:16px;height:16px;position:absolute;top:0;left:0;z-index: 200; } ul.rating li.one a{left:0; } ul.rating li.two a{left:16px; } ul.rating li.three a{left:32px; } ul.rating li.four a{left:48px; } ul.rating li.five a{left:64px; } ul.rating li a:hover{width:80px;height:16px;left:0;background-p_w_picpath:url(../p_w_picpaths/star-matrix.gif);overflow:hidden;z-index:2; } ul.rating li.one a:hover{background-position:0 -96px; } ul.rating li.two a:hover{background-position:0 -112px; } ul.rating li.three a:hover{background-position:0 -128px; } ul.rating li.four a:hover{background-position:0 -144px; } ul.rating li.five a:hover{background-position:0 -160px; }
//给商品评分$(".rating li a").click(function(){var title=$(this).attr("title");alert("您给此商品的评价是:"+title);var cl=$(this).parent().attr("class");$(this).parent().parent().removeClass("nostar").addClass(cl+"star");$(this).blur();//去掉a链接的虚线框.return false;})
转载于:https://blog.51cto.com/lflianglan/1287921
给商品评分效果,CSS技巧相关推荐
- 用css实现星级评分效果
以前看到其他网站实现的实现的星级评分效果,没在意那么多,直到昨天做一个页面需要这个功能效果时,发现自己实现起来还是这么困难,折腾了半天才弄出来. 1. 其实主要是利用背景图片的切换位置来实现星级的效果 ...
- (商品评价页)商品星级评分html+css+js
html部分: <div class="evaluate_main"><div class="evaluate_title"><d ...
- html css星级评分,纯css实现星级评分效果
效果 效果图如下 星级评分 实现思路: 5个类型为radio的input,abel标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋转的动画 dom结构 用form ...
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知 ...
- css label 居中布局_用好这20个css技巧快速提升你的CSS技能
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要 ...
- 如何提升你的CSS技能?掌握这20个css技巧即可[完整版]
前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快.这里涵盖了20个css技巧来帮助 ...
- css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
- 成都盛迈坤电商:提高店铺商品评分的方法
在拼多多,相信可以看到很多商品,价格也比较便宜.当然,价格低并不意味着对应的商品质量低,更多的是与其主要的购物模式有关.毕竟,以更低的价格和更高的价格购买高质量的商品一直是拼多多的一种新的购物模式,也 ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
最新文章
- TOF摄像机可以替代Flash激光雷达吗?
- php如何在添加div的背景颜色_css3颜色渐变:css3如何实现背景颜色渐变?
- Android -- 获取摄像头帧数据解码
- java参数后面跟三个点是什么意思
- python输出程序运行时间_叨叨 Python 性能优化工具
- 疑似realme旗舰新机入网:采用升降前置摄像头
- Linux命令参数详细解析 mv
- 如何快速合并多个PDF文件或图片为一个PDF文件?
- 信息学奥赛一本通2061
- 基于javaweb+jsp房屋租赁系统(java+SSM+jsp+mysql+maven)
- shell批量修改后缀_Powershell批量修改用户的UPN后缀
- 51制作贪吃蛇小游戏,附带Proteus仿真
- Java程序员常用的各种快捷键和命令
- 知识图谱——TransH模型原理
- C/C++中生成随机序列——随机函数的选择和自我实现
- pycharm:远程连接服务器调试代码(保姆级详细步骤)
- 数据还能再低点?SuperData显示2016年VR出货量为630万台
- jkd8新特性 StreamAPi流
- MySQL重置密码(适用Windows)
- OpenCV的 Mat对象 与Halcon的 HImage对象 的相互转换
热门文章
- 大学python挂科补考_大一就挂科了,怎么办。感觉没了信心?
- Lesson 1 Hello World
- 判断某个磁盘中是否有某个文件
- java的运行原理_Java的运行原理(转载)
- php定时发送生日模块消息_RabbitMQ之消息的可靠性投递
- 连通域的原理与Python实现
- 最准的中文文本相似度计算工具
- Adaboost入门教程——最通俗易懂的原理介绍
- x86软件如何在win32下使用_「译」JVM是如何使用那些你从未听过的x86魔幻指令实现String.compareTo的...
- FLOPs衡量模型复杂度