<!DOCTYPE HTML>

<html>

    <head>

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

        <title>无标题文档</title>

        <script>

            window.onload = function (){

                var oUl = document.getElementById("list");

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

                var half = 2;

                var off = 1;

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

                {

                    aLi[i].index = i;

                    aLi[i].onmouseover = function (){

                        if(off)

                        {

                            fillstar(this.index,half);

                        }

                    }

                    aLi[i].onmouseout = function (){

                        if(off)

                        {

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

                            {

                            aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat";

                            }

                        }

                    }

                    aLi[i].onclick = function (){

                        if(off)

                        {

                            fillstar(this.index,half);

                            off = !off;

                        }

                    }

                    function fillstar(num,half){

                        if( num < half )

                        {

                            for(var i = 0; i <= num; i++)

                            {

                                aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -116px";

                            }

                        }else if ( num >= half && num < aLi.length - 1 ){

                            for(var i = 0; i <= num; i++)

                            {

                                aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -57px";

                            }

                        }else {

                            for(var i = 0; i <= num; i++)

                            {

                                aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -87px";

                            }

                        }

                    }

                }

            }

        </script>

        <style>

            #list{list-style: none;}

            #list li{

                height: 23px;

                width: 24px;

                background: url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat;

                display: block;

                float: left;

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <ul id = "list">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </body>

</head>

js 淘宝评分的更多相关文章

  1. Auto.js淘宝领喵币

    最近,淘宝的新玩法,一直在充斥我的眼球,尤其是喵币的,盖楼... .... 于是就进去看了看,发现逛逛店铺,给好多喵币,但是要进20个,每个要15秒,好麻烦,于是就上网搜了一下,有没有脚本 因为之前搞 ...

  2. JS淘宝小广告

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

  3. JS淘宝浏览商品

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

  4. 淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）

    我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...

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

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

  6. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  7. 摘自淘宝的js地区组件

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

  8. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

  9. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

随机推荐

  1. 【转载】zookeeper使用和原理探究（一）

    最近开始看到一些公司在使用zookeeper,本身对此了解的很少,这里看到一篇非常好的文章,因此转载 原贴地址:http://www.blogjava.net/BucketLi/archive/201 ...

  2. s if标签

    字符串N一定要用“”双引号包含,从test的包含则用单引号 ‘ ’,如果相反,则不能正确判断该属性是否与该字符串相等. 正确:<s:if test='activityBean.searchFor ...

  3. PAT1029

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在2行中分别给出应该输入的文字.以及实际 ...

  4. 大素数判断和素因子分解（miller-rabin，Pollard_rho算法）

    #include<stdio.h> #include<string.h> #include<stdlib.h> #include<time.h> #in ...

  5. js确保正确this的几种写法

    1.直接用bind调用 this.method.bind(this) 2.构造函数中用bind定义 class Foo{ constructor(){ this.method = this.metho ...

  6. kubernetes-dashboard

    1.导入kubernetes-dashboard 镜像 [root@node1 DNS]# docker load < kube-dashboard.tar 6bc90c4dba69: Load ...

  7. vue项目中使用vue-awesome

    公司在项目重构时,遇到图标问题,然后把vue-awesome.iconfont.iconMoon都试了一遍,虽然最终使用了iconMoon但是也要把这两个过程记录一下. github地址 1.首先安装 ...

  8. input输入框与元素间有间隙

    <div class="container"> <button>1</button> <button>2</button> ...

  9. jQuery重要插件！

    原文发布时间为:2009-08-05 -- 来源于本人的百度文章 [由搬家工具导入] 强烈推荐：240多个jQuery插件 概述 jQuery 是继 prototype 之后又一个优秀的 Javasc ...

  10. eclipse去除所有调试断点 （转）

    今天调试的时候发现之前加了太多断点,想去除所有断点,才想起来一直都没有使用过这个功能,放狗搜了一下,很快找到,记录一下. 方法一: 在工作界面,点window菜单栏,选中Preperences,在Ge ...