zoukankan      html  css  js  c++  java
  • 用Jquery+HTML写星星评分

    类似于实现这样:

     -----

    index.html:

    <!DOCTYPE html>
    <html>
    <head>
        <title>星星评分</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
            <!--引入jquery-->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="js/index.js"></script>
    </head>
    <body>
    <div class="box clear">
        <div class="list">
            <i class="star1"></i>
            <i class="star"></i>
        </div>
        <div class="list">
            <i class="star1"></i>
            <i class="star"></i>
        </div>
        <div class="list">
            <i class="star1"></i>
            <i class="star"></i>
        </div>
        <div class="list">
            <i class="star1"></i>
            <i class="star"></i>
        </div>
        <div class="list">
            <i class="star1"></i>
            <i class="star"></i>
        </div>
        <div class="txt">非常好</div>
    </div>
    </body>
    </html>    

    --

    index.js:

    $(function(){
    //定义一个arr数组,值为:"非常差",'差',"一般","满意","非常满意"
        var arr=["非常差",'差',"一般","满意","非常满意"];
    //鼠标经过
        $('.list').mouseover(function(){
            $(this).nextAll().find(".star1").css("z-index","0");//每次移动进去后,先让next所有同辈元素都是灰色星星
            $(this).find(".star1").css("z-index",1);//让移上去的哪个自己是黄色星星
            
            $(this).prevAll().find(".star1").css("z-index",1);//让移上去哪个星星的前面的所有同辈元素都是黄色星星
            $(".txt").text(arr[$('.box').find(".list").index($(this))]);//通过父元素,获得当前元素在父元素中的index
        })
    })
  • 相关阅读:
    JAVA :: MVC
    顺序栈创建
    editplus 配置工具集
    链表之创建
    13.1.22:线性表之单链表
    Web 多线程作业
    给 Mac OS X Lion 刻一张安装光盘
    kubernetes组件之api 安装
    kubeadm 之k8s 多master 部署
    kubernetes集群之部署kubescheduler组件
  • 原文地址:https://www.cnblogs.com/RorinL/p/14056213.html
Copyright © 2011-2022 走看看