<!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" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <title>迅雷评分效果 - 豪情</title>

    <style type="text/css">

        *{ margin:0; padding:0;}

        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}

        table{border-collapse:collapse;border-spacing:0;}

        li{list-style:none;}

        input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}

        textarea{resize:none}

        address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}

        legend{color:#000;}

        a{color:#0a8cd2;text-decoration:none;}

        a:hover{text-decoration:underline;}

        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

        .clearfix{display:inline-block;}

        .clearfix{display:block;}

        .none{display:none}

        .demo{ position:relative; width:300px;margin:0 auto; padding-top:120px;}

        .list li{ float:left; width:16px; height:16px; margin-right:3px;cursor:pointer; display:inline; overflow:hidden; background:url(https://images0.cnblogs.com/blog/100150/201304/02220917-50348f051a004a7385e4aaafcc3ce7a6.png) 0 -16px no-repeat;}

        .list li.cur{ background-position:0 0;}

        .score{ font-size:14px; color:#f60; padding:0 5px;}

        .text{ position:absolute; padding:3px 5px; left:135px;top:120px; border:1px solid #ccc;}

    </style>

</head>

<body>

<div id="demo" class="demo">

    <ul class="list">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <p class="score"></p>

    <p class="text none">力荐</p>

</div>

<script type="text/javascript">

    var oDemo = document.getElementById('demo');

    var oUl = oDemo.getElementsByTagName('ul')[0];

    var oScore = oDemo.getElementsByTagName('p')[0];

    var oP = oDemo.getElementsByTagName('p')[1];

    var aLi = oUl.getElementsByTagName('li');

    var oLi = null;

    var aData = ['较差', '一般', '好看', '推荐', '力荐'];

    var bCheck = false;

    for(var i = 0; i < aLi.length; i++){

        var first = null;

        aLi[i].index = i;

        oLi = aLi[i];

        oLi.onmouseover = function(){

            for(i = 0; i < aLi.length; i++){

                aLi[i].className = '';

            }

            for(var j = 0; j <= this.index; j++){

                aLi[j].className = 'cur';

            }

            oP.style.display = 'block';

            oP.innerHTML = aData[this.index];

            if(!bCheck){

                oScore.innerHTML = (this.index + 1) * 20 + '分';

            }

        }

        oLi.onclick = function(){

            if(!bCheck){

                first = this.index;

                bCheck = true;

                alert('评分成功!');

            } else {

                for(i = 0; i < aLi.length; i++){

                    aLi[i].className = '';

                }

                for(var j = 0; j <= first; j++){

                    aLi[j].className = 'cur';

                }

                alert('你已评过分!');

            }

        }

    }

</script>

</body>

</html>

[JavaScript] js 迅雷评分效果的更多相关文章

  1. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  2. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  5. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  6. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  7. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  9. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

随机推荐

  1. ASP.net导出EXCEL乱码？试试这个

    网上的方法有说加meta的,是有用,不过,不够直接, 甭管你asp文件是utf-8还是gb2312,加入下面两句就搞掂: response.Charset="GB2312" ses ...

  2. html 笔记

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 100 high quality blogs from java developers

    This list collects 100 high quality blogs from Java developers from all over the world. Some of thes ...

  4. 5.CentOS6.6安装git

    额,因为公司的项目存放在gitlab上,所以要求员工必须会使用git 这里简单说下git在 linux下的安装,使用的说明,我会单开一篇文章来写 1.首先卸载掉CentOS6.6自带的1.7.1版本的 ...

  5. sql语句中left join、 inner join的使用

    转自:http://blog.csdn.net/winter3125/article/details/5032871 table a(id, type): id    type ----------- ...

  6. 怎么用js代码改变单选框的选中状态

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...

  7. 网易游戏QA工程师笔试回忆-2012.9【个人题解】

    ========================转帖======================== 网易游戏QA工程师笔试回忆-2012.9 刚刚从武大回来,趁热回忆下题目,给以后的XDJMs参考. ...

  8. 注册dll

    unit Unit1; interface uses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...

  9. Solr4.8.1与Tomcat7整合

    Solr4.8.1和Tomcat7都可以到官方网站去下载,我这里就不多说了,如下图. 这里我们首先解压Solr-4.8.1.zip,再解压Tomcat,解压后,再在当前文件夹下建2个文件夹,一个用来放 ...

  10. Object-C内存管理

    Object-C的内存管理是基于引用计数的.你要做的事情只是关注你的引用,而释放内存的工作实际上由运行环境完成. 在最简单的情形中,你分配(alloc)的对象,或只是保留(retain)在一些地方的对 ...