zoukankan      html  css  js  c++  java
  • js评价五星

    js评价五星

    1、图片(star.png):

    2、图片和html文件在同级目录

    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $('.difficulty i').click(function(){$(this).nextAll().removeClass('s');$(this).prevAll().addClass('s');$(this).addClass('s');});
      $('.difficulty i').mouseenter(function(){$(this).nextAll().removeClass('h');$(this).prevUntil('.s').addClass('h');$(this).addClass('h');}).mouseleave(function(){$(this).siblings().removeClass('h');$(this).removeClass('h');});
    });
    </script>
    <style  type="text/css">
    .difficulty { 80px; height:14px; float:left; margin:7px 30px 0 0;}
    .difficulty i{ 15px; height:14px; float:left; background:url(star.png) no-repeat -30px 0; margin:0 1px 0 0; cursor:pointer;}
    .difficulty i.h{ background:url(star.png) no-repeat -15px 0;}
    .difficulty i.s{ background:url(star.png) no-repeat 0 0;}
    </style>
    </head>
    
    <body>
    <div class="difficulty"><i></i> <i></i> <i></i> <i></i> <i></i></div>
    </body>
    
    </html>
    

      

  • 相关阅读:
    [HAOI2016]食物链
    [TJOI2011]序列
    P2548 [AHOI2004]智能探险车
    [JSOI2008]最大数
    模板之dinic
    Excim的NOIP2017游记
    数列排序
    Car的旅行路线
    [HAOI2006]均分数据
    [luogu2210] Haywire
  • 原文地址:https://www.cnblogs.com/chenweichu/p/7571630.html
Copyright © 2011-2022 走看看