jquery文章评论星级打分效果代码



119 475 159



特效描述:文章评论 星级打分效果,注意路径要用相对路径

代码结构

1. 引入CSS

<link media="screen" href="statics/grade.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script src="statics/jquery-latest.pack.js" type="text/javascript"></script>
<script src="statics/grade.js" type="text/javascript"></script>

3. HTML代码

<div id="box"> 
	<h4>我的评分</h4> 
	<div class="content"> 
		<div id="myPoint">
			<span><big>5</big><small>.0</small></span> 
			<div>
				<img src="statics/star5.gif" />
				<em>(一般)</em>
			</div>
		</div> 
		<div id="doPoint"> 
			<p>请点击以下星级进行评分:我的评分=(故事+更新+文笔)/3</p> 
			<table cellspacing="0" cellpadding="0" border="0"> 
					<tbody> 
						<tr> 
							<th>故事:</th> 
							<td><span class="star5" id="item1" v="5"><small>1</small><small>2</small><small>3</small><small>4</small><small>5</small><small>6</small><small>7</small><small>8</small><small>9</small><small>10</small></span></td> 
							<td><strong>5</strong> <em>(一般)</em></td>
						</tr> 
						<tr> 
							<th>更新:</th> 
							<td><span class="star5" id="item2" v="5"><small>1</small><small>2</small><small>3</small><small>4</small><small>5</small><small>6</small><small>7</small><small>8</small><small>9</small><small>10</small></span></td> 
							<td><strong>5</strong> <em>(一般)</em></td>
						</tr> 
						<tr> 
							<th>文笔:</th> 
							<td><span class="star5" id="item3" v="5"><small>1</small><small>2</small><small>3</small><small>4</small><small>5</small><small>6</small><small>7</small><small>8</small><small>9</small><small>10</small></span></td> 
							<td><strong>5</strong> <em>(一般)</em></td>
						</tr>
					</tbody>
			</table>
		</div> 
		<form id="form1" name="form1" action="" method="get">
			<input id="pointV1" type="hidden" value="5" name="pointV1" /> 
			<input id="pointV2" type="hidden" value="5" name="pointV2" /> 
			<input id="pointV3" type="hidden" value="5" name="pointV3" /> 
			<label>评论内容:<textarea id="content" name="content" rows="5" cols="50"></textarea></label>
			<button type="submit">提交</button> 
		</form>
	</div>
</div>  



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 滑动星星打分 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到