星级评分的一些实现方式 和 jQuery插件

整理一些星级评分的一些实现方式 和 jQuery插件,以备查用。

星级评分展示CSS样式技巧

通过百分比来显示星级评分,这样的好处就是只要设计一个亮星和一个暗星就行了,其余的通通交给比例来实现,这样的方式更加精准,同时避免了程序对分数进行哪些不必要的四舍五入判断。

实现这个效果是异常简单的,简单说来就是先放一个背景,然后在背景上面放一个图片,然后显示图片能看到的比例就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星级评分展示CSS样式技巧 - 威言威语weisay.com</title>
<style type="text/css">
.vote-star{
	display:inline-block;/*内联元素转换成块元素,并不换行 weisay.com*/
	margin-right:6px;
	width:85px;/*5个星星的宽度 weisay.com*/
	height:17px;/*1个星星的高度 weisay.com*/
	overflow:hidden;
	vertical-align:middle;
	background:url(/blog/pic/star.gif) repeat-x 0 -17px;}
.vote-star i{
	display:inline-block;/*内联元素转换成块元素,并不换行 weisay.com*/
	height:17px;/*1个星星的高度 weisay.com*/
	background:url(/blog/pic/star.gif) repeat-x 0 0;}
.vote-number{
	vertical-align:middle;
	font-family:微软雅黑, Verdana, Geneva, sans-serif;
	font-size:12px;}
</style>
</head>
<body>
<div class="star">
<span class="vote-star"><i style="width:97%"></i></span><span class="vote-number">9.7分</span>
<br /><br />
<span class="vote-star"><i style="width:44%"></i></span><span class="vote-number">4.4分</span>
<br /><br />
<span class="vote-star"><i style="width:13%"></i></span><span class="vote-number">1.3分</span>
</div>
</body>
</html>

程序只要做一件简单的事情,就是控制代码里面的 width:97% ,宽度的比例就行,这样就能实现精准的星级评分展示效果了。

用到的图片:http://www.weisay.com/blog/pic/star.gif

star

来自:http://www.weisay.com/blog/star-rating-use-css.html

星级评分jQuery插件

jQuery Raty 和 jRating

WordPress评分插件

WP-PostRatings

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2013/11/30作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

13 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 斌果 斌果说道:
    10#

    换主题后没有把高亮代码的CSS放进去

    • 斌果 斌果说道:

      倡萌没有搜索页

      • 胡倡萌 胡倡萌说道:

        匆匆忙忙上线,连404和搜索页都没有,不急不急

  2. chonghua chonghua说道:
    9#

    WP-PostRatings的样式不是很喜欢

  3. Gavin Gavin说道:
    8#

    有演示效果就好了。

  4. 云时代 云时代说道:
    7#

    我用的是WP-PostRatings~

  5. 耕耘 耕耘说道:
    6#

    不错,收藏备查。 :evil:

  6. 从良未遂 从良未遂说道:
    5#

    不错的技巧,留名

  7. 老妖互联网博客 老妖互联网博客说道:
    4#

    我也用百度喜欢后分享的按钮,还不错

  8. Tokin Tokin说道:
    3#

    用百度喜欢。。。。

  9. 茶话汇 茶话汇说道:
    2#

    这个插件要创建表空间的吗?

    • 胡倡萌 胡倡萌说道:

      wp的插件,只要需要存储数据的,都是要写数据库的

  10. fukr fukr说道:
    1#

    一直在用WP-PostRatings

扫一扫,用手机访问本站

扫一扫,用手机访问本站