jQuery拖放速度减慢
jQuery Drag and Drop slow down
是否可以降低可拖动元素的速度?
我已经用jQuery拖放构建了一个简单的滑块。当滑块元素(可拖动元素)移动到特定位置时,图片会淡入。因此,如果你移动可拖动元素的速度不太快,看起来你可以用滑块处理"图片动画"。现在,我想放慢可拖动元素的速度。因此,用户永远不能过快地拖动元素。
这是我的代码示例。
$('.slider').mousemove(function(){
if($(this).position().left >= 0 && $(this).position().left <= 2 ) {
$('.slider_1').fadeIn();
$('.slider_2').fadeOut();
}
...
我希望有人能帮我:)
啊!最后是一个有趣的jQuery问题。
这是绝对可以实现的。下面我解释了如何。如果您想直接进入演示,请单击此处。
假设您的HTML设置如下:
<div id="slider">
<div id="bar"></div>
</div>
其中的栏是您单击并拖动的实际内容。
现在你需要做的是:
- 获取
$('#bar').offset().left
- 使用一些额外的变量
SPEED
显式指定拖动可拖动对象时#bar
的位置
例如:
ui.position.left += (ui.offset.left - ui.originalPosition.left - leftOffset)*SPEED;
然后,您可以使用jQuery的.fadeTo()
(或其他)函数中的$('#bar').offset().left
来更改您所谈论的图像的不透明度。
这一切看起来微不足道,但事实并非如此。在尝试实现这一点时存在一些问题。例如:
当滑块达到最大滑动距离时,应停止设置动画或重置滑块。您可以通过多种方式做到这一点,但我认为最简单的解决方案是编写一个
.mousedown
/.mouseup
侦听器,它更新变量dragging
,跟踪用户是否仍在尝试拖动#bar
。如果不是,则重置#bar
。如果是,请将滑块保持在最大距离,直到触发.mouseup
。
此外,您必须小心预定义的边界。
我建议的代码如下:
// Specify your variables here
var SPEED = -0.6;
var border = 1; // specify border width that is used in CSS
var fadeSpeed = 0; // specify the fading speed when moving the slider
var fadeSpeedBack = 500; // specify the fading speed when the slider reverts back to the left
// Some pre-calculations
var dragging = false;
var slider = $('#slider');
var leftOffset = slider.offset().left + border;
var adjustedSliderWidth = 0.5*slider.width();
// the draggable function
$('#bar').draggable({
axis: "x",
revert : function(event, ui) {
$(this).data("draggable").originalPosition = {
top : 0,
left : 0
};
$('#image').fadeTo(fadeSpeedBack, 0);
return !event;
},
drag: function (event, ui) {
var barOffset = $('#bar').offset().left - leftOffset;
if (barOffset >= 0) {
if (barOffset < adjustedSliderWidth) {
ui.position.left += (ui.offset.left - ui.originalPosition.left - leftOffset)*SPEED;
} else {
if (!dragging) { return false; }
else { ui.position.left = adjustedSliderWidth; }
}
}
// fading while moving:
$('#image').fadeTo(fadeSpeed, (ui.position.left/adjustedSliderWidth));
// remove this if you don't want the information to show up:
$('#image').html(ui.position.left/adjustedSliderWidth
+"<br '><br '>"
+ui.position.left);
}
});
// the mouse listener
$("#bar").mousedown(function(){ dragging = true; });
$("#bar").mouseup(function(){ dragging = false; });
我还在draggable
上实现了revert
选项,因此当用户释放#bar
时,滑块很好地返回到零。当然,如果你愿意,你可以删除它。
现在,您的整个问题所涉及的变量是变量:
SPEED
。
可以通过为此变量指定一个数字来指定拖动速度。
例如:
var SPEED = 0.0; // the normal dragging speed
var SPEED = 0.5; // the dragging speed is 1.5 times faster than normal
var SPEED = -0.5; // the dragging speed is 0.5 times faster than normal
因此,负值会使拖动速度减慢,而正值则会使拖动速度加快。
不幸的是(或者实际上:幸运的是),不可能更改鼠标指针的速度。这是因为只有操作系统可以控制鼠标的坐标和速度。浏览器无法影响这一点。就我个人而言,我认为这并不重要:移动滑块的速度比正常速度慢是你想要实现的,所以你可以忽略鼠标指针。
为了看到所有这些,我为您准备了一个工作jsFiddle:
演示
我希望这能帮助你:)
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- HTML/CSS-用于拖放的全页面覆盖
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- dblclick事件是在jquery拖放后触发的
- 无法进行拖放以使用本地存储
- 如何使用Java脚本创建提交按钮's的拖放功能
- Chrome原生拖放相对容器并不能正确渲染重影
- 如何在Javascript中创建排序、拖放多级列表
- html5拖放文件-在提交整个表单时上传
- 在jQuery UI中获取ul和li值,拖放即可排序
- html5拖放确定拖动项目的来源
- 我使用什么语言来创建像Webly这样的拖放功能
- HTML5拖放;Drop-使用jQuery处理事件
- 使用jquery拖放图像
- HTML5拖放访问属性
- HTML5拖放-如何删除IE上的默认重影图像
- HTML5拖放新图像并替换Div中的现有图像
- Famo.us 球拖放,释放时设置速度
- jQuery拖放速度减慢