我已经在我的基于jQuery的网站上使用了以下javascript。它的作用是向上/向下移动滑块,并将项目缩放到更高/更小的上方。
一切正常,但由于滑块的高度只有几个像素,而且移动事件有点慢(它不会触发每个像素)所以当我快速移动鼠标时,滑块无法保持on和鼠标离开滑块项目。由于它绑定到滑块,因此不会再触发mouseMove事件。我想一切都可以通过将mouseMove全局设置为整个站点来修复,但它不起作用,或者至少我不知道如何使其工作。它应该与文件或机构绑定吗?
这是滑块的当前代码:
$.fn.resize = function (itemToResize) {
MinSize = 100;
MaxSize = 800;
pageYstart = 0;
sliderMoveing = false;
nuskriverHeight = 0;
this.mousedown(function(e) {
pageYstart=e.pageY;
sliderMoveing = true
nuskriverHeight = parseFloat((itemToResize).css('height'));
});
this.mouseup(function() {
sliderMoveing = false
});
this.mousemove(function(e) {
if (sliderMoveing) {
(itemToResize).css('height', (nuskriverHeight + (e.pageY - pageYstart)));
if (parseFloat( (itemToResize).css('height')) > MaxSize) { (itemToResize).css('height', MaxSize) };
if (parseFloat( (itemToResize).css('height')) < MinSize) { (itemToResize).css('height', MinSize) };
};
});
};
感谢您的帮助,非常感谢
答案 0 :(得分:4)
将鼠标事件放在document
var $doc = $(document);
this.mousedown(function(e) {
pageYstart=e.pageY;
sliderMoveing = true
nuskriverHeight = parseFloat((itemToResize).css('height'));
$doc.mouseup(function() {
sliderMoveing = false ;
$doc.unbind('mousemove mouseup')
});
$doc.mousemove(function(e) {
if (sliderMoveing) {
(itemToResize).css('height', (nuskriverHeight + (e.pageY - pageYstart)));
if (parseFloat( (itemToResize).css('height')) > MaxSize) { (itemToResize).css('height', MaxSize) };
if (parseFloat( (itemToResize).css('height')) < MinSize) { (itemToResize).css('height', MinSize) };
};
});
});
答案 1 :(得分:1)
在mousedown
上,您应该将事件处理程序(在document
上)绑定到mousemove
和mouseup
。
在mouseup处理程序中,您应该再次断开两个全局处理程序。
但是,使用jQuery UI的Draggable可能更简单:http://jqueryui.com/demos/draggable/
答案 2 :(得分:0)
通常,您会在滑块上观看mousedown
(开始拖动),当您进行拖动时,您会看到mousemove
和mouseup
(和keypress
,如果你想在document
上的任何地方允许Esc取消等等。