<style>
        *{margin: 0;padding: 0;}
        .pingfen{ width: 195px; margin:10px auto; height:20px; position: relative;}
        .pingfen ul{height:35px; margin-bottom: 10px;}
        .pingfen li{ width: 35px;margin-left: 4px; float: left; height: 35px; cursor: pointer; background:    url(/public/nrmap/img2/fstar2.png) no-repeat center center; list-style: none;}
        .pingfen .active{background: url(/public/nrmap/img2/fstar1.png) no-repeat center center;}
        .pingfen p{
            position: absolute; top:24px; left: 0px; width: 134px; height: 28px;
            background: #fff; line-height: 28px; text-align: center; border:1px solid #333;
            display:none;}
    </style>

<script>
    var aData =["很差","较差","一般","推荐","力推"];
    window.onload=function(){
        var oDiv = document.getElementById("rank");
        var aLi = oDiv.getElementsByTagName("li");
        var oP = oDiv.getElementsByTagName("p")[0];
        var i =0;
        for(i=0;i<aLi.length;i++){
            aLi[i].index = i;
            aLi[i].onmouseover= function(){
                oP.style.display = "block";
                oP.style.marginTop="30px";
                oP.innerHTML=aData[this.index];
                for(i=0; i<=this.index;i++){
                    aLi[i].className="active";
                }
            };
            aLi[i].onmouseout = function(){
                oP.style.display = "";
                for(i=0; i<aLi.length; i++){                    aLi[i].className="";            
    };         
   aLi[i].onclick=function(){        
        alert(aData[this.index]);    
        };     
   }   
 };
</script>

<body>
<div id="rank" class="pingfen"> 
   <ul>    
      <li></li>  
      <li></li>  
      <li></li>  
      <li></li>    
      <li></li>  
  </ul>   
 <p>加载中</p>  
 </div>
</body>

JS原生实现五角星评价详情demo的更多相关文章

  1. 用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介

    在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...

  2. JS原生实现视频弹幕Demo（仿）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  4. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  5. js原生回到顶部

    <!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...

  6. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  7. 使用jQuery.makeArray() 将多种类型转换成JS原生Array

    jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...

  8. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  9. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

随机推荐

  1. 【NOIP2013模拟联考7】OSU

    [NOIP2013模拟联考7]OSU 描述 Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: 一共有n次操作,每次操作只有成功与失败之分, ...

  2. Django项目：CRM(客户关系管理系统)--76--66PerfectCRM实现CRM课程作业排名

    # classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...

  3. 实习面试总结（只写了昨天腾讯的面试和拿到offer的一个小公司， 有空再把前面的补上吧）

    一个月来面了大大小小的公司有近10个,还是总结一下吧,希望对大家有点用处. 我想说的是,大学四年,如果不会继续读研深造,那么你需要做的不仅仅是疯狂的做项目,或者单独的学算法. 最好的方式就是都了解一点 ...

  4. skyline中遍历fly工程树

    在skyline二次开发过程中,做空间分析总是要去读取工程中的shp图层.假设想获取工程树中“建筑物”图层,图层结构如下: 传统的方法是: var itemId=SGWorld.ProjectTree ...

  5. hibernate一对多关系 在一方查询会获得重复数据，重复数量就是多端数据数量用@Fetch(FetchMode.SUBSELECT)解决

    先来看数据表 版块表只有两个数据 板块1是推荐,下边没有子栏目 板块2下边有14个子栏目 在1的一端来查询,发现结果有16条 也就是板块1+版块2+版块2和他的14个子集都列出来了,这明显不对 板块对 ...

  6. Spring.之.报错：Caused by: java.lang.IllegalArgumentException: No Spring Session store is configured: set the 'spring.session.store-type' property

    Spring.之.报错 No Spring Session store is configured springboot在启动的时候报如下错误: Error starting ApplicationC ...

  7. vue项目中实现扫码功能

    项目地址:https://github.com/wkl007/vue-scan-demo.git 项目主要是做的一个扫码的功能 核心代码为 <div class="scan" ...

  8. 【笔记】LR中设置检查点

      我们为什么需要在LR中设置检查点?? 我们在录制编写脚本后,通常会进行回放,如果回放通过没有错误.我们就认为脚本是正确的.那么LR怎么区分脚本是否回放正确:基本上所有脚本回放错误都是因为 404错 ...

  9. UOJ#422. 【集训队作业2018】小Z的礼物

    #422. [集训队作业2018]小Z的礼物 min-max容斥 转化为每个集合最早被染色的期望时间 如果有x个选择可以染色,那么期望时间就是((n-1)*m+(m-1)*n))/x 但是x会变,中途 ...

  10. solr源码解读（转）

    solr源码解读(转)原文地址:http://blog.csdn.net/duck_genuine/article/details/6962624 配置 solr 对一个搜索请求的的流程 在solrc ...