zoukankan      html  css  js  c++  java
  • 星星评价等级

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .container{
                float:left;
            }
            .score{
                float: left;
                position: relative;
                 100px;
                margin-top: 5px;
                margin-left: 10px;
            }
            span{
                display: none;
                position: absolute;
                left: 0;
                top: 0;
            }
            .scoreDisplay{
                display: block;
            }
        </style>
        <script src="jquery-1.12.2.min.js"></script>
    </head>
    <body>
    <!--   一个容器里面放5张图片,先所有的都空星图片-->
    <!--   该案例的要点就是在于鼠标移动上去时改变图片的src-->
    <div class="container">
        <img src=".idea/empty.png" alt="">
        <img src=".idea/empty.png" alt="">
        <img src=".idea/empty.png" alt="">
        <img src=".idea/empty.png" alt="">
        <img src=".idea/empty.png" alt="">
    </div>
    <div class="score">
        <span>很差</span>
        <span>较差</span>
        <span>一般</span>
        <span>较好</span>
        <span>很好</span>
    </div>
    <script>
        var img = $(".container img");//获取5张图片的集合
        var span = $(".score span");
        var i,j,k;//定义变量i,j,k
        k = -1;//k给予一个初始值-1,,不然后面第1个星星始终是被点亮的
        img.mouseenter(function(){  //设置鼠标进入时的效果,首先将所有的星星熄灭,然后再根据用户鼠标进入的星星下标值点亮星星
            span.removeClass("scoreDisplay");//鼠标进入时,将右边的评论清除掉
            img.attr("src",".idea/empty.png");
            i = img.index(this);
            for(j=0;j<=i;j++)
            {
                img.eq(j).attr("src",".idea/shining.png");
            }
            span.eq(i).addClass("scoreDisplay");//根据用户进入的i值来显示评论
        }).mouseleave(function(){   //仍然是将所有的星星熄灭,然后根据k值来点亮星星
            span.removeClass("scoreDisplay");//鼠标离开时,首先清除掉评论
            img.attr("src",".idea/empty.png");//接下来将所有星星变为空星
            for(j=0;j<=k;j++)//根据最终值k值来确定点亮几颗星星
            {
                img.eq(j).attr("src",".idea/shining.png");
            }
            if(k==-1)//如果k值=-1,则不显示任何一个评论内容
            {
                span.removeClass("scoreDisplay");
            }
            else{
                span.eq(k).addClass("scoreDisplay");//根据最终值k值显示评论
            }
        });
        $("img").click(function(){ //k记录用户点击鼠标时的星星下标值
            k = img.index(this);
        })
    </script>
    </body>
    </html>

    需要插件,

  • 相关阅读:
    hdu5728 PowMod
    CF1156E Special Segments of Permutation
    CF1182E Product Oriented Recurrence
    CF1082E Increasing Frequency
    CF623B Array GCD
    CF1168B Good Triple
    CF1175E Minimal Segment Cover
    php 正则
    windows 下安装composer
    windows apache "The requested operation has failed" 启动失败
  • 原文地址:https://www.cnblogs.com/zxy945/p/6598277.html
Copyright © 2011-2022 走看看