JS仿淘宝星星评价

//直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style>

/* 星级评分 */
.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(http://a.tbcdn.cn/app/rc/img/star_v2.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;}
</style>
</head>
<body>

$("#test").click(function(){
   alert("产品服务="+$("#stars1-input").val()+" 分");
   alert("环境服务="+$("#stars2-input").val()+" 分");
   alert("服务态度="+$("#stars3-input").val()+" 分");
});

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 || {});
   }
}

var Stars1 = new Stars("stars1");
var Stars2 = new Stars("stars2");
var Stars3 = new Stars("stars3");

</script>
</html>

效果图：

JS仿淘宝星星评价的更多相关文章

JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
JS 仿淘宝幻灯片非完整版小案例
仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
js 实现仿淘宝五星评价 demo
<style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...
JS仿淘宝左侧菜单
http://www.webdm.cn/webcode/1c724a06-06f4-4c4f-931a-c683285fa700.html
基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
仿淘宝头像上传功能（三）——兼容 IE6 浏览器。
前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...

随机推荐

NOSDK--SDK一键打包及统一接入的实现（前言）
前言一,一键打包的实现 1.1 shell脚本执行流程介绍 1.2 自动刷新mk文件的脚本介绍 1.3 编译及拷贝资源的脚本介绍 1.4 打包及签名的脚本介绍 1.5 mac下的脚本环境配置及脚本的 ...
Android高手速成--第二部分工具库
主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少Vie ...
CMake命令/函数汇总（翻译自官方手册）
查看官方文档 cmake命令选项 CMake变量 CMake命令汇总 / add_custom_command add_custom_target/add_definitions/add_depen ...
ms-dos中 MSCDEX命名语法详解
一.MSCDEX的语法及参数: MSCDEX可以在AUTOEXEC.BAT文件中自动加载,也可以在DOS的命令行中载入但要使用光驱,前提条件是在Config.sys文件中加载了光驱的驱动 ...
Qml 写的弹出层控件
QML弹出窗口组件,灯箱效果.动画效果,可拖拽核心思路:一个mask层,一个最顶层,都用rectangle,禁止事件穿透使用 Popup { id: popup width: 200; heigh ...
Java 23种设计模式（通俗易懂解释收集整理）
(补充中...) P02 抽象工程模式 P14 TemplateMethod 模板方法模式讲清楚了为什么叫做模板方法 http://www.cnblogs.com/java-my-life/arc ...
UIStackView
既要温故又要知新...温故而知新,我懂. 在Cocoachina上看到了,UIStackView. 没用过额,试iOS9的新特性.一研究,妈的还挺眼熟.一想,这不和Android上的线性布局一样么.. ...
js函数中this的不同含义
1.js函数调用过程中,js线程会进入新的执行环境并创建该环境的变量对象,并添加两个变量:this和arguments,因此可以在函数中使用这两个变量.需要注意的是,this变量不能重新赋值,而arg ...
Android错误
1. [2016-09-16 14:25:45 - X_Card] Found 2 versions of android-support-v4.jar in the dependency list, ...
Lamp搭建bugfree
1.下载bugfree安装包 2.将bugfree安装包解压到/home/wwwroot/default目录下 unzip bugfree.zip -d /home/wwwroot/default/ ...

JS仿淘宝星星评价

JS仿淘宝星星评价的更多相关文章

随机推荐

热门专题