首页 > web前端 > css教程 > 用css制作星级评分_经验交流

用css制作星级评分_经验交流

PHP中文网
发布: 2016-05-16 12:09:18
原创
1985 人浏览过

先看看效果

Step 1: XHTML

 

      
        
  • 1
  •    
        
  • 2
  •   
        
  • 3
  •   
        
  • 4
  •  
        
  • 5

  •  

这里只介绍静态的技术,随后会给出系统的应用,你也是自己加程序来尝试一下,还可以采用ajax来做出绚丽的效果

Step 2:图像|Graphics

为了节省您的空间和宽带,我们采用gif图,这个图片就是打分的按钮。

用css制作星级评分_经验交流

Step 3:CSS

    .star-rating{
    list-style: none; /* turn off the default list image bullets*/
    margin: 3px; /*I wan't some space around this thing*/
    padding: 0px; /* I'm anal. I'm pretty sure OL's have a default padding of 0px, but we'll set it to 0px just to be safe*/
    width: 100px; /*This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/
    height: 20px; /* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.*/
    position: relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
    background: url(star_rating.gif) top left repeat-x; /* By repeating this image horizontally, the list will appear to have five stars.*/
    }

根据代码我们知道:
去掉了ul的margin和padding以及list-style,定义了高20px宽100px的一个区块

下来时按钮元素的制作,下面是css

    .star-rating li{
    padding:0px; /* no padding at all*/
    margin:0px; /* no margin at all*/
    /**/ /*反斜杠 hack,这会导致 IE5 Mac 看不到此规则*/
    float: left; /* for any other browser, we are going to float left, this makes a horizontal list*/
    /* */ /* end the IE5 Backslash hack*/
    }

这段代码让li实现横向排放,并解决IE5 MAC bug

继承上面的按钮元素样式,再定义鼠标动作,下面是css

   .star-rating li a{
    display:block; /* we want a block item, so that we can mess with its height and width*/
    width:20px; /* easy stuff, we want the width to be the same as the star width*/
    height: 20px; /* same as the width*/
    text-decoration: none; /* remove the underline from the link*/
    text-indent: -9000px; /* indent the text off the screen using a [url=http://www.php.cn/]image-replacement technique[/url], we dont want to see the text anymore.*/
    z-index: 20; /*we'll come back to this*/
    position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/
    padding: 0px; /*once again, we don't need any padding*/
   background-image:none; /* we will not show the star*/
   }

  13. .star-rating li a:hover{
  14. background: url(star_rating.gif) left bottom; /*this is where the magic is*/
  15. z-index: 1; /*move this star to the bottom of the z-index stack*/
  16. left: 0px; /*move this star all the way to the left, aligned with the side of the UL parent item*/
  17. }

下来我们要考虑怎样才能显示不同的星级,三星?四星?原理是什么,我们继续将背景图片横向重复显示,然后定义a和a:hover的宽度来区分选择的星级。

下面是css

   .star-rating a.one-star{
    left: 0px;
    }  
   .star-rating a.one-star:hover{
    width:20px;
    }
   .star-rating a.two-stars{
    left:20px;
   }
   .star-rating a.two-stars:hover{
   width: 40px;
   }
   .star-rating a.three-stars{
   left: 40px;
   }
   .star-rating a.three-stars:hover{
   width: 60px;
   }
   .star-rating a.four-stars{
   left: 60px;
   }
   .star-rating a.four-stars:hover{
   width: 80px;
   }
   .star-rating a.five-stars{
   left: 80px;
   }
   .star-rating a.five-stars:hover{
   width: 100px;
   }

到此,这个制作完成

第一个模型中忽视了半星级的情况和无初始的星级,下来我们就是要解决这个问题。

Step 1. 先看看效果|Check it in action

用css制作星级评分_经验交流
图1

看看效果

Step 2: The XHTML

 


     
  • Currently 3.5/5 Stars.

  •  
  • 1

  •  
  • 2

  •  
  • 3

  •  
  • 4

  •  
  • 5

  •  

和第一个模型的结构相似,唯一不同的是:

  • Currently 3.5/5 Stars.
  • 定义初始值

    Step 3: The Star Image

    我们制作一个有三个星的图片,第一个星是空值,第二个是要选择的值,第三个是真实的值。

    用css制作星级评分_经验交流
    图2

    Step 4: The CSS, the Magic

       .star-rating li.current-rating{
        background: url(star_rating.gif) left bottom;
        position: absolute;
        height: 30px;
        display: block;
        text-indent: -9000px;
        z-index: 1;
        }

    他定义了初始值,为了避免继承容器ul的相对定位,采用position: absolute;每个星的高度为height:30px;别的就是隐藏文本和定义对齐方式。

    空值css

        .star-rating{
        …
        background: url(star_rating.gif) top left repeat-x;
        }

    选择值css

        .star-rating li a:hover{
        background: url(star_rating.gif) left center;
        …
        }

    初始值当然会随着选择变动,那么怎样实现它的变化呢?

  • style="width:105px;">Currently 3.5/5 Stars.
  • 看了这段代码相信你就知道是什么原因了!那这个width是怎样计算的呢?

    Average Rating|平均值: 3.5
    Each Star Width|每个星的宽度: 30px;
    Set width to|将宽度设为: 3.5 * 30 = 105px

    下面欣赏一下这个新模型吧
    * Example 1: 150 x 30 star rating system
    * Example 2: 125 x 25 star rating system
    * Example 3: 25 x 125 vertical star rating system

    我们用php来实现

    首先是实现的原理

    从上一个css实现星级评分I 、II,可是看出,只要能识别onclick和将数据记录至数据库中存储,然后从数据库中调用出数据进行计算就
    可以得到当前的评分均值——当前的分值。

    1.下面是建立数据库的sql

    CREATE TABLE ratings(
     id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
     total_votes INT NOT NULL,
     total_value INT NOT NULL,
     which_id INT NOT NULL,
     which_table VARCHAR(255),
     used_ips LONGTEXT NULL
     );

    2.参数文件引用

    require("connectDB.php");
    require("closeDB.php");
    require("tableName.php");
    require("openDB.php");
    ?>

    3.显示投票程序和更新投票数据程序

    $rating_posted=$_GET['vote'];//pased variable by the the stars value
    $id=$_GET['id'];
    $query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" Error: ".mysql_error());
    $numbers=mysql_fetch_assoc($query);
    $checkIP=unserialize($numbers['used_ips']);
    $count=$numbers['total_votes'];//how many votes total
    $current_rating=$numbers['total_value'];//total number of rating added together and stored
    $sum=$rating_posted+$current_rating;// add together the current vote value and the total vote value
    $tense=($count==1) ? "vote" : "votes";//plural form votes/vote
    $voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Pattern match ip:suggested by Bramus! http://www.php.cn/ - this variable searches through the previous ip address that have voted and returns true or false

    if($voted){
    echo "

    ".
    "

      ".
      "
    • Current rating.
    • ".
           "
    • 1
    • ".
           "
    • 2
    • ".
           "
    • 3
    • ".
           "
    • 4
    • ".
           "
    • 5
    • ".
      "
    ".
     "

    Rating: ".@number_format($current_rating/$count,2)." {".$count." ".$tense." cast}
    You have previously voted.

    ";//show the current value of the vote with the current numbers
    }else{

    if(isset($_GET['vote'])){

    if($sum==0){
    $added=0;//checking to see if the first vote has been tallied
    }else{
    $added=$count+1;//increment the current number of votes
    }

    if(is_array($checkIP)){
    array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if it is an array i.e. already has entries the push in another value
    }else{
    $checkIP=array($_SERVER['REMOTE_ADDR']);//for the first entry
    }

    $insert=serialize($checkIP);
    mysql_query("UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insert."' WHERE id='".$_GET['id']."'");

    echo  "

    Rating: ".@number_format($sum/$added,2)." {".$added." ".$tense." cast} Thank you for your vote!

    ";//show the updated value of the vote
    }else{
    ?>


    4.访问者评分程序


     
      CSS:星级评分器示例
      
      
     


    如何这个教程清楚吗?



    • 当前评级
          
    • 1

    •     
    • 2

    •     
    • 3

    •     
    • 4

    •     
    • 5


    5.最新评分结果提示

    echo "

    评分: ".@number_format($sum/$count,2)."{".$count." ".$tense.";//显示当前更新的投票值
    } //结束 isset get vote 
    } //结束投票 true, false
    ?>

    相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板