我的問題是我無法得到這個jQuery滑塊從.1增加到10,並在10結束(停止)。想拉這個沒有jQuery UI或jQuery工具。jQuery投票(評分)滑塊 - 工作,但有錯誤
我打算使用滑塊位置更新隱藏的輸入值,然後是一個說「VOTE」的按鈕。
我很感謝這個項目的任何幫助。謝謝,布蘭登。
我想限制滑塊只能在「slider_container」div內移動,我無法讓框停在左右兩側?
<HTML>
<HEAD>
<script type="text/javascript">
<!--
$(function() {
var sliderMouseDown = false;
var count = 0;
$("#slider").mousedown(function() {
sliderMouseDown = true;
});
$(document).mousemove(function(evnt) {
if (sliderMouseDown) {
count = count + .1;
$("#vote").html(count);
}
});
$(document).mouseup(function() {
if (sliderMouseDown)
{
$("#slider").focus();
count = 0;
sliderMouseDown = false;
}
});
});
var x1 = 0;
var drag = false;
$(document).ready(function(e){
$('#slider').mousedown(function(e){
e.preventDefault();
x1 = e.pageX - parseInt($('#slider').css('left'));
drag = true;
})
$(document).mouseup(function(e){ drag = false; })
$(document).mousemove(function(e){
if(!drag) return
$('#slider').css('left',eval(e.pageX - x1)+'px')
})
});
//-->
</script>
<style type="text/css">
#slider_container { background: url(images/rating-slider-bg.jpg) repeat-x; width: 200px; height: 22px; background-color: #ffffff; display:block; position: relative; z-index: 1; }
#slider { background: url(images/rating-slider.jpg) no-repeat; width: 10px; height: 35px; top: -4px; position: absolute; left:0; cursor: pointer; cursor: hand; z-index: 99; }
</style>
</HEAD>
<BODY>
<br><br><br><br><br><br>
<center>
<div id="slider_container"><div id="slider"></div></div>
<div id="vote" class="vote"></div>
</center>
</BODY>
</HTML>
我不同意將此視爲「不是真正的問題」。直到我讀完最後兩行時,我纔想到同樣的事情。 @Brandon,請將代碼發佈到您的滑塊,以便我們不必搜索它。 – 2010-09-01 15:56:35