zoukankan      html  css  js  c++  java
  • jQuery实现星级评测

    效果图片
    html文件

    代码
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="images/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function(){
    $("ul li").each(function(i){                                    
        $(this).click(function(){
        $("li").removeClass("back");                                                  
        $("li:gt("+i+")").addClass("back");     
                     })
                    })
    });

    </script>
    <style  type="text/css">
    .front {
        background:url(images/star_03.jpg);
    }
    .back {
        background:url(images/star_hover.jpg);
    }
    ul {
        list-style:none;
        width:300px;
    }
    ul li {
        display:block;
        float:left;
        border:1px solid #ccc;
        width:31px;
        height:30px;
        background:url(images/star_03.jpg);
        margin:0px 5px 0px;
    }
    </style>
    </head>
    <body>
    <ul>
      
    <li></li>
      
    <li></li>
      
    <li></li>
      
    <li></li>
      
    <li></li>
    </ul>
    </body>
    </html>

    文件下载

    星级评测.rar 

  • 相关阅读:
    php和c++自带的排序算法
    谷歌Chrome浏览器离线安装包
    js阻止表单提交
    Sublime text中文乱码解决办法
    不会飞的鸟
    linux命令**50
    linux基础2
    linux基础1
    css3实现单行文本溢出显示省略号
    null和undefined的区别
  • 原文地址:https://www.cnblogs.com/clc2008/p/1710766.html
Copyright © 2011-2022 走看看