jquery用户评星小例子

用户评星

效果

 页面结构

class="evaluation">
    class="iconfont">
    class="iconfont">
    class="iconfont">
    class="iconfont">
    class="iconfont">
    

这里我引用的是字体图标

css样式

@font-face {font-family: "iconfont";
    src: url('../fonts/iconfont.eot?t=1484033191829'); /* IE9*/
    src: url('../fonts/iconfont.eot?t=1484033191829#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/iconfont.woff?t=1484033191829') format('woff'), /* chrome, firefox */
    url('../fonts/iconfont.ttf?t=1484033191829') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../fonts/iconfont.svg?t=1484033191829#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:#bfbfbf;
}
.icon-star:before { content: "\e641"; }

.yollew{
    color:#f0db18;
}
.evaluation{
    width: 300px;
    margin:200px auto;
}
.evaluation i{
    cursor: pointer;
}

引入的部分

rel="stylesheet" href="css/index.css" />

js部分