我设计了一个滑块,例如带有 jquery 的播放器音量滑块。但问题仅在 FIREFOX 中,第一次当我拖动滑块时这是正常的,但第二次浏览器拖动该 div 就像拖动图像一样。除非第一次拖动后我点击一个空白区域并再次拖动滑块。这里有什么问题?对不起,我的英语不好。
编辑 :
http://codepen.io/anon/pen/bjChB
html:
<div id="btn_container">
<div id="button"></div>
</div>
CSS:
div#btn_container{
width:200px;
height:60px;
position:absolute;
background:red;
margin:auto;
right:0;left:0;top:0;bottom:0;
}
div#button{
width:60px;
height:60px;
background:blue;
position:absolute;
left:0px;top:0px;
}
jQuery:
$(document).ready(function() {
var pressed = false;
var $this;
var x;
$("div#button").mousedown(function(e){
pressed = true;
$this = $(this);
var offset = $this.offset();
var inside = e.pageX - offset.left;
$(document).mousemove(function(e){
if(pressed){
var parentOffset = $this.parent().offset();
x = e.pageX - parentOffset.left;
if( x <= $this.parent().width() - $this.width() + inside && x >= 0 + inside)
$this.css({"left":x - inside});
}
});
});
$(document).mouseup(function(){
if(pressed){
if( x > $this.parent().width() - $this.width() - 30)
$this.animate({"left":$this.parent().width() - $this.width()} , 50);
pressed = false;
}
});
});