仿淘宝星级评分效果
作者:yunsudong 来源:51js 发布时间:2010-09-03 18:37:00
最近一个小项目需要一个星级评分的效果,所以去淘宝偷了一个,但是还得加载YUI很不爽,还是自己动手写一个吧~
HTML:
<!--
# 星级评分
# star:value = 分数
-->
<div class="shop-rating">
<span class="title">物流公司的服务:</span>
<ul class="rating-level" id="stars2">
<li><a class="one-star" star:value="20" href="#">20</a></li>
<li><a class="two-stars" star:value="40" href="#">40</a></li>
<li><a class="three-stars" star:value="60" href="#">60</a></li>
<li><a class="four-stars" star:value="80" href="#">80</a></li>
<li><a class="five-stars" star:value="100" href="#">100</a></li>
</ul>
<span class="result" id="stars2-tips"></span>
<input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>
<!-- END 星级评分 -->
CSS:
/* 星级评分 */
.shop-rating {
height: 25px;
overflow: hidden;
zoom: 1;
padding: 2px 0px;
position: relative;
z-index: 999;
}
.shop-rating span {
height: 23px;
display: block;
line-height: 23px;
float: left;
}
.shop-rating span.title {
width: 125px;
text-align: right;
margin-right: 5px;
}
.shop-rating ul {
float: left;
margin:0;padding:0
}
.shop-rating .result {
margin-left: 20px;
padding-top: 2px;
}
.shop-rating .result span {
color: #ff6d02;
}
.shop-rating .result em {
color: #f60;
font-family: arial;
font-weight: bold;
}
.shop-rating .result strong {
color: #666666;
font-weight: normal;
}
.rating-level,
.rating-level a {
background: url(/file/UploadPic/20109/3/star_v2-25.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
background-position: 0px 0px;
width: 120px;
height: 23px;
position: relative;
z-index: 1000;
}
.rating-level li {
display: inline;
}
.rating-level a {
line-height: 23px;
height: 23px;
position: absolute;
top: 0px;
left: 0px;
text-indent: -999em;
*zoom: 1;
outline: none;
}
.rating-level a.one-star {
width: 20%;
z-index: 6;
}
.rating-level a.two-stars {
width: 40%;
z-index: 5;
}
.rating-level a.three-stars {
width: 60%;
z-index: 4;
}
.rating-level a.four-stars {
width: 80%;
z-index: 3;
}
.rating-level a.five-stars {
width: 100%;
z-index: 2;
}
.rating-level .current-rating,.rating-level a:hover{background-position:0 -28px;}
.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}
.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}
结构和样式是偷淘宝的!!
JS:
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;
}
return false;
}
/**
* 星星打分组件
*
* @author Yunsd
* @date 2010-7-5
*/
var Stars = Class.create();
Stars.prototype = {
initialize: function(star,options) {
this.SetOptions(options); //默认属性
var flag = 999; //定义全局指针
var isIE = (document.all) ? true : false; //IE?
var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
var tipsTxt = this.options.tipsTxt; // 定义提示文案
var len = starlist.length; //星星数量
for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
starlist[i].value = i;
starlist[i].onclick = function(e){
stopDefault(e);
this.className = this.className + nowClass;
flag = this.value;
input.value = this.getAttribute("star:value");
tips.innerHTML = tipsTxt[this.value]
}
starlist[i].onmouseover = function(){
if (flag< 999){
var reg = RegExp(nowClass,"g");
starlist[flag].className = starlist[flag].className.replace(reg,"")
}
}
starlist[i].onmouseout = function(){
if (flag< 999){
starlist[flag].className = starlist[flag].className + nowClass;
}
}
};
if (isIE){ //FIX IE下样式错误
var li = document.getElementById(star).getElementsByTagName('li');
for (var i = 0, len = li.length; i < len; i++) {
var c = li[i];
if (c) {
c.className = c.getElementsByTagName('a')[0].className;
}
}
}
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Input: "",//设置触保存分数的INPUT
Tips: "",//设置提示文案容器
nowClass: "current-rating",//选中的样式名
tipsTxt: ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
};
Extend(this.options, options || {});
}
}
猜你喜欢
- 给定图像集如下,所有类别的图片均在一个文件夹内:给定与图片名相匹配的表格,声明每张图片对应的类别(共有20个类别):那么,如何根据表格中所给
- JS怎样知道Flash广告条被网友点击过? 1、Flash广告条不是我做的,它的链接是写在里面的。 2、我想统计这个Flash被网友点击了多
- 升序import pandas as pdimport numpy as npdata = np.random.randint(low=2,
- 之前一直遇到js插件生成的元素,click事件无效的问题,重新绑定也不行,终于找到解决方法,在此记下来。同时加深对js事件处理机制的理解。1
- 在《JavaScript语言精粹》的第72页有这样一段:用正则表达式字面量创建的RegExp对象来共享同一个单实例:function mak
- 装饰器一、介绍器:代表函数的意思。装饰器本质就是是函数功能:装饰其他函数,就是为其他函数添加附加功能 被装饰函数感受不到装饰器的存
- 前言本文主要基于在Uber的Go monorepo中发现的各种数据竞争模式,分析了其背后的原因与分类,希望能够帮助更多的Go开发人员,去关注
- PDO是PHP 5新加入的一个重大功能,因为在PHP 5以前的php4/php3都是一堆的数据库扩展来跟各个数据库的连接和处理,什么 php
- 下面就来说说解决方案吧~import osimport syscurPath = os.path.abspath(os.path.dirna
- 跟着趣味开发python一起实现的弹球小游戏游戏运行效果实现流程1.创建游戏画布(创建ball类)2.增加几个动作(让小球移动、让小球来回反
- 最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候 往往遇到一些初始化的东西。有时候会发现,自
- 一、简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装pyt
- 单线程执行python的内置模块提供了两个内置模块:thread和threading,thread是源生模块,threading是扩展模块,
- 前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,
- 这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrains之手。
- 快捷键1、编辑(Editing)Ctrl + Space 基本的代码完成(类、方法、属性)Ctrl + Alt + Space 快速导入任意
- 读取binlog,方法有二:1.使用mysqlbinlog,详细用法,请参考MySQL手册2.使用MySQL的自带工具,SHOW BINLO
- 没有,用case when 来代替就行了. 例如,下面的语句显示中文年月 select getdate() as 日期,case month
- 双系统配置及MySQL数据库存储情境:Windows XP下d:\mysql\data中存有MySQL数据库,Linux系统为Ubuntu