簡單的jquery滑動星星評分效果代碼



186 743 248



特效描述:星星評分 滑動星星評分 星星評分效果,簡單的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

加群請備注:從官網了解到

老夫子电子