jquery星星评分效果(1/5)

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery星星评分效果</title>
</head>

<body>
这里是一个很好的评价影响不大。这不包括php教程的,它是唯一的网页特效,html格式,css教程和图像。如果你喜欢这个,我有我的php脚本创建的,但不会支持,我很快扔在一起。但是,怎么会,现在回到这个职位。

看看下面你可以看到我们将与此项目完成时创建。

跳到完整的源代码| |下载源的。zip

我们首先是一个html文件,jquery库,star_rating.js(包含所有的效果),以及与一些形象图片的文件夹。

首先让我们看看文件结构。

 

现在我包含在html文件中的所有的css,剪出来的懒惰,所以你没有与一个在它的css少量额外的文件。

因此,让我们谈论的html。

除了隐藏的表单字段包含选定的最后评价一切都包含在rating_cont部。

里面主要是三个分区rating_cont div的

<div id="rating_cont">
<div id="rating_btns"></div>
<div id="rating_on" >&nbsp;</div>
<div id="rated"></div>
</div>
<input type="hidden" id="rating_output" name="rating_output" value="not rated" />

css代码

#rating_cont { background: #1e1d1c url(images/rating_background.jpg) top left no-repeat; border: 1px solid #f9ba0d; width: 140px; height: 23px; text-align: left; margin-left: 6px;}

这使人们对名人的关闭后台形象'和创建了我们的高度,宽度,边框,背景为我们的主要容器。

接下来,让我们创建的css,为rating_btns部的html。

该rating_btns部将与它的实际收视率在无序列表。

看看下面。

<ul>
<li>0.5</li>
<li>1.0</li>
<li>1.5</li>
<li>2.0</li>
<li>2.5</li>
<li>3.0</li>
<li>3.5</li>
<li>4.0</li>
<li>4.5</li>
<li>5.0</li>
</ul>

如果你做的代码一步一步,我敢肯定你是否注意到,这看起来非常丑陋现在。让我们添加的css到rating_btns科和ul认证我们。

该rating_btns分区需要高于rating_on分区,我们将创造未来,所以我们会在这一个相对定位和一个z - 100指数。我们还添加高度和宽度来定义我们的<li>链接的容器。

内部rating_btns科是我们的<ul>和它的<li>。我们不希望我们的<ul>或我们<li>来有任何保证金或填充。在<li>需要14px宽。猜测原因。 14 × 100 = 140!是啊,你懂了。这就是我们的货柜,惊人的宽度,我知道。我们将浮动留给他们,给他们一个块显示屏使他们不去了对方,最后但并非最不重要的,更改字体显示。我们将改变字体1px,并作为背景相同的颜色。我敢肯定你问,为什么不是空的,让他们在那里没有任何文字呢?那么,我们将使用这个文本,告诉我们你jquery的脚本上空盘旋

#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}
#rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }
#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1e1d1c; }

 

首页 1 2 3 4 5 末页

时间: 2025-01-30 07:51:55

jquery星星评分效果(1/5)的相关文章

js星星评分效果_javascript技巧

html如下: <div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"></li> <li rel="3" title="一般般,给3分

HTML5商城开发三 jquery 星星评分插件

展示:   实现方法: 1.html引用star-grade.js <script type="text/javascript" src="Scripts/star-grade.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".sstar").BindStars();//使用属性

jquery 星星 打分效果代码

星级投票效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="c

javascript 淘宝星星评分效果

你对我人品的评价: 20 40 60 80 100

jquery实现类似淘宝星星评分功能有截图_jquery

html <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> <p id="p"></p> <p id="sco

js实现商城星星评分的效果_javascript技巧

在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善. html如下: <div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"><

jquery实现类似淘宝星星评分功能实例_jquery

本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用.具体方法如下: html部分代码如下: <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div>

js实现的星星评分功能函数_javascript技巧

本文实例讲述了js实现的星星评分功能函数.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

JS实现星星评分功能实例代码(两种方法)_javascript技巧

一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no