简单的jquery滑动星星评分效果代码



181 722 241



特效描述:星星评分 滑动星星评分 星星评分效果,简单的jQuery滑动星星评分代码,鼠标滑到星星上高亮显示,点击评分效果代码。可以根据实际需求改变评分等。

代码结构

1. 引入JS

<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>

2. HTML代码

<div style="width:400px;margin:50px auto;">
	<p style="font-size:20px">请给出你的评分(百分制):</p>
	<div id="star1"></div>
	<div id="result1"></div>
	<p style="font-size:20px">请给出你的评分(十分制):</p>
	<div id="star2"></div>
	<div id="result2"></div>
</div>
<script type="text/javascript">
rat('star1','result1',10);
rat('star2','result2',1);
function rat(star,result,m){
	star= '#' + star;
	result= '#' + result;
	$(result).hide();//将结果DIV隐藏
	$(star).raty({
		hints: ['10','20', '30', '40', '50','60', '70', '80', '90', '100'],
		path: "css/img",
		starOff: 'star-off-big.png',
		starOn: 'star-on-big.png',
		size: 24,
		start: 40,
		showHalf: true,
		target: result,
		targetKeep : true,//targetKeep 属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失
		click: function (score, evt) {
			//第一种方式:直接取值
			alert('你的评分是'+score*m+'分');
		}
	});
	/*第二种方式可以设置一个隐蔽的HTML元素来保存用户的选择值,然后可以在脚本里面通过jQuery选中这个元素来处理该值。 弹出结果
	var text = $(result).text();
	$('img').click(function () {
		if ($(result).text() != text) {
			alert('你的评分是'+$(result).text()/m+'分');
			alert(result);
			return;
		}
	});*/
}
</script>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 文字提示框 提示文字 滑动星星打分

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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