面子工程之文章评分功能

| 折腾 | 7,266 views | 14 replies

960grid
不用问，这又是一篇折腾文章，给文章添加了一个评分功能。之所以说是面子工程，是因为这文章评分功能不会写入到数据库，甚至按F5之后，这评分又被归零了。那么为什么要折腾呢，因为俺喜欢折腾。。。

折腾开始，首先找到你的single.php文件，在想要加入这评分功能的地方加入下面这段HTML代码：

然后就是给这货添加CSS效果，当然之前把这星星图片先上传到images文件夹下：

.star_bg {
width: 120px; height: 20px;
background: url(images/star.png) repeat-x;
position: relative;
overflow: hidden;
}
.star {
height: 100%; width: 24px;
line-height: 6em;
position: absolute;
z-index: 3;
}
.star:hover {
background: url(images/star.png) repeat-x 0 -20px!important;
left: 0; z-index: 2;
}
.star_1 { left: 0; }
.star_2 { left: 24px; }
.star_3 { left: 48px; }
.star_4 { left: 72px; }
.star_5 { left: 96px; }
.star_1:hover { width: 24px; }
.star_2:hover { width: 48px; }
.star_3:hover { width: 72px; }
.star_4:hover { width: 96px; }
.star_5:hover { width: 120px; }

label {
display: block; _display:inline;
height: 100%; width: 100%;
cursor: pointer;
}

/* 幕后的英雄，单选按钮 */
.score { position: absolute; clip: rect(0 0 0 0); }
.score:checked + .star {
background: url(images/star.png) repeat-x 0 -20px;
left: 0; z-index: 1;
}
.score_1:checked ~ .star_1 { width: 24px; }
.score_2:checked ~ .star_2 { width: 48px; }
.score_3:checked ~ .star_3 { width: 72px; }
.score_4:checked ~ .star_4 { width: 96px; }
.score_5:checked ~ .star_5 { width: 120px; }

.star_bg:hover .star { background-image: none; }

/* for IE6-IE8 JS 交互 */
.star_checked {
background: url(images/star.png) repeat-x 0 -20px;
left: 0; z-index: 1;
}

星星png图片如右图：star

   
你可能感兴趣的文章：

14 条评论

  2. 居然，居然是面子工程~~~哈哈~~貌似实现这个好复杂好复杂.插件配置更复杂….于是就放弃了…..