如何解决mousemove 功能旋转图片
我想用 mousemove 旋转一堆图片,在这个例子中是汽车,所以它可以从各个角度看到。问题是,在第一次图像旋转之后,图像的其余部分会在鼠标移动后立即旋转,而不是像第一次那样,图像仅旋转,如果鼠标移动位置更大或更小,距离单击位置 5px。所以只有当移动大于 5 像素时才应该旋转。数组中的最后一张图片也存在问题,如果它旋转到数组的最后一张图片,那么它会变成这种蓝色背景色,就像您使用 chrome devtools 检查元素时一样。希望我说清楚是什么问题,因为我的英语不是最好的。谢谢!
$('.angle-container').mousedown(function(e1){
let clickedPosition = e1.pageX;
let pictureArray = $('.pictures img');
let activeImage = $('.pictures img.active');
let nextActiveImage;
function rotate(e2){
let posRight = e2.pageX;
let posLeft = e2.pageX;
if(posRight -5 > clickedPosition){
nextActiveImage = activeImage.next();
if(nextActiveImage.length === 0){
nextActiveImage = pictureArray.first();
}
pictureArray.removeClass('active');
nextActiveImage.addClass('active');
activeImage = nextActiveImage;
}else if(posLeft + 5 > clickedPosition){
nextActiveImage = activeImage.prev();
if(nextActiveImage.length === 0){
nextActiveImage = pictureArray.last();
}
pictureArray.removeClass('active');
nextActiveImage.addClass('active');
activeImage = nextActiveImage;
}
}
$(this).mousemove(function(e2){
rotate(e2);
});
});
$('.angle-container').mouseup(function(){
$(this).unbind('mousemove');
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。