采用js鼠標拖動滑塊實現評分打分效果



46 182 61



特效描述:采用js 鼠標拖動滑塊 實現評分打分,采用js鼠標拖動滑塊實現評分打分效果

代碼結構

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. HTML代碼

<div class="grade_warp">
	<div class="User_ratings User_grade" id="div_fraction0">
		<div class="ratings_title01"><p><span>功能</span>-你覺得這個創意在功能上優秀嗎?<i>分數越高表示越優秀。</i></p></div>
		<div class="ratings_bars">
			<span id="title0">0</span>
			<span class="bars_10">0</span>
			<div class="scale" id="bar0">
				<div></div>
				<span id="btn0"></span>
			</div>
			<span class="bars_10">10</span>
		</div>
	</div>
	<div class="User_ratings User_grade" id="div_fraction1">
		<div class="ratings_title01"><p><span>外觀</span>-你覺得這個創意在外觀上優秀嗎?<i>分數越高表示越優秀。</i></p></div>
		<div class="ratings_bars">
			<span id="title1">0</span>
			<span class="bars_10">0</span>
			<div class="scale" id="bar1">
				<div></div>
				<span id="btn1"></span>
			</div>
			<span class="bars_10">10</span>
		</div>
	</div>
	<div class="User_ratings User_grade" id="div_fraction2">
		<div class="ratings_title01"><p><span>成本</span>-你覺得這個創意在成本上優秀嗎?<i>分數越高表示越優秀。</i></p></div>
		<div class="ratings_bars">
			<span id="title2">0</span>
			<span class="bars_10">0</span>
			<div class="scale" id="bar2">
				<div></div>
				<span id="btn2"></span>
			</div>
			<span class="bars_10">10</span>
		</div>
	</div>
	<div class="User_ratings User_grade" id="div_fraction3">
		<div class="ratings_title01"><p><span>難度</span>-你覺得這個創意在難度上可行嗎?<i>分數越高表示越可行。</i></p></div>
		<div class="ratings_bars">
			<span id="title3">0</span>
			<span class="bars_10">0</span>
			<div class="scale" id="bar3">
				<div></div>
				<span id="btn3"></span>
			</div>
			<span class="bars_10">10</span>
		</div>
	</div>
	<div class="User_ratings User_grade" id="div_fraction4">
		<div class="ratings_title01"><p><span>環保</span>-你覺得這個創意在環保上優秀嗎?<i>分數越高表示越優秀。</i></p></div>
		<div class="ratings_bars">
			<span id="title4">0</span>
			<span class="bars_10">0</span>
			<div class="scale" id="bar4">
				<div></div>
				<span id="btn4"></span>
			</div>
			<span class="bars_10">10</span>
		</div>
	</div>
</div>	
<script type="text/javascript">
scale = function (btn, bar, title) {
	this.btn = document.getElementById(btn);
	this.bar = document.getElementById(bar);
	this.title = document.getElementById(title);
	this.step = this.bar.getElementsByTagName("DIV")[0];
	this.init();
};
scale.prototype = {
	init: function () {
		var f = this, g = document, b = window, m = Math;
		f.btn.onmousedown = function (e) {
			var x = (e || b.event).clientX;
			var l = this.offsetLeft;
			var max = f.bar.offsetWidth - this.offsetWidth;
			g.onmousemove = function (e) {
				var thisX = (e || b.event).clientX;
				var to = m.min(max, m.max(-2, l + (thisX - x)));
				f.btn.style.left = to + 'px';
				f.ondrag(m.round(m.max(0, to / max) * 100), to);
				b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
			};
			g.onmouseup = new Function('this.onmousemove=null');
		};
	},
	ondrag: function (pos, x) {
		this.step.style.width = Math.max(0, x) + 'px';
		this.title.innerHTML = pos / 10 + '';
	}
}
new scale('btn0', 'bar0', 'title0');
new scale('btn1', 'bar1', 'title1');
new scale('btn2', 'bar2', 'title2');
new scale('btn3', 'bar3', 'title3');
new scale('btn4', 'bar4', 'title4');
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 其他 圖片拖動 圖片拖拽 進度條 進度條插件
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子