Jquery 如何在移动光标时停止旋钮移动?
在我的应用程序中,用户(学生)只需将Jquery 如何在移动光标时停止旋钮移动?,jquery,css,slider,jquery-knob,Jquery,Css,Slider,Jquery Knob,在我的应用程序中,用户(学生)只需将旋钮滑到右侧并单击即可登录到应用程序,用户的状态从缺席切换到出席。它在平板电脑上运行良好。但使用笔记本电脑/台式机,当学生用光标将旋钮移动到右侧时,它会用光标获得附加,我的意思是,如果用户将光标移回左侧,旋钮也会移动,而不点击它。我想解决这个问题,当用户向右移动旋钮并单击时,它应该标记“存在”,并自动移动到其上一个(左)位置,而不是追逐光标 代码 $(function() { var e = 2; $(".slider").each(funct
旋钮滑到右侧并单击即可登录到应用程序,用户的状态从缺席
切换到出席
。它在平板电脑上运行良好。但使用笔记本电脑/台式机
,当学生用光标将旋钮移动到右侧时,它会用光标获得附加
,我的意思是,如果用户将光标移回左侧,旋钮也会移动,而不点击它。我想解决这个问题,当用户向右移动旋钮并单击时,它应该标记“存在”,并自动移动到其上一个(左)位置,而不是追逐光标
代码
$(function() {
var e = 2;
$(".slider").each(function() {
function u() {
o.css({
"-webkit-transform": "translateZ(0)",
"-webkit-transition": "opacity 0.25s",
"-webkit-animation": "textani 2s linear infinite forwards",
opacity: 1
})
}
function a() {
o.css({
"-webkit-transition": "none",
"-webkit-animation": "none"
})
}
function f(e) {
i.css({
"-webkit-transition": "none"
});
t = e
}
function l(n) {
var r = Math.max(n - t, 0);
if (r + i.width() > s.width()) {
r = s.width() - i.width() - e * 2
}
var f = Math.max(80 - r, 0) / 80;
if (f > 0) {
a()
} else {
u()
}
i.css({
left: r + e
});
o.css({
opacity: f
});
}
function c(t) {
function o() {
i.css({
"-webkit-transform": "translateZ(0)",
"-webkit-transition": "left 0.25s cubic-bezier(0.5, 0.1, 0.7, 1.5)",
left: e
});
u();
}
var n = parseInt(i.css("left")) / (s.width() - i.width() + e);
if (n > .95) {
changeStatus();
// var a = r.attr("href");
// window.location = a;
setTimeout(o, 250)
} else {
o()
}
}
var t, n;
var r = $(this);
var i = $(this).children(".knob");
var s = $(this).children(".track");
var o = $(this).children(".text");
i.bind("touchstart", function(e) {
e.preventDefault();
oev = e.originalEvent;
f(oev.touches[0].pageX);
});
i.bind("touchmove", function(e) {
e.preventDefault();
oev = e.originalEvent;
l(oev.touches[0].pageX);
});
i.bind("touchend", function(e) {
e.preventDefault();
oev = e.originalEvent;
c(0);
});
i.bind("mousedown", function(e) {
f(e.screenX);
$(document).bind("mousemove.knob", function(e) {
l(e.screenX);
return false;
});
$(document).bind("mouseup.knob", function(e) {
c(0);
});
return false;
});
});
});
我刚刚添加了一行新代码,它刚刚解除了mouseover事件的绑定,并且工作正常:
i.bind("mousedown", function(e) {
f(e.screenX);
$(document).bind("mousemove.knob", function(e) {
l(e.screenX);
return false;
});
$(document).bind("mouseup.knob", function(e) {
$(document).unbind("mousemove.knob"); // this line
c(0);
$(document).unbind(".knob");
});
return false;
});
你把mousedown绑起来了,但不是mouseup。