jQuery带表情图标评价打分

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写css代码。.score { margin: 20px auto; width: 600px; }.score .default-statu { height: 47px; width: 251px; float: left; }.score-expression, .score-praise, .score-heart, .score-star, .score-medal, .score-water, .score-crown, .score-flower { overflow: hidden; }.score .default-statu .default-icon { background-image: url('../images/icon.png'); background-repeat: no-repeat; background-position: top right; display: inline-block; height: 47px; width: 50.16px; cursor: pointer; }.score-expression .default-statu .default-icon { background-position: top right; }.score-praise .default-statu .default-icon { background-position: right -47px; }.score-heart .default-statu .default-icon { background-position: right -94px; }.score-star .default-statu .default-icon { background-position: right -141px; }.score-medal .default-statu .default-icon { background-position: right -188px; }.score-water .default-statu .default-icon { background-position: right -235px; }.score-crown .default-statu .default-icon { background-position: right -282px; }.score-flower .default-statu .default-icon { background-position: right bottom; }.score-description { width: 249px; height: 47px; line-height: 47px; text-align: center; float: left; }.result { margin: 10px auto; width: 200px; }.result-score { color: green; font-size: large; }

书写并添加js代码。  

代码整体结构。

查看效果。