jquery event for mousehold

-2

Я создаю javascript/jquery программу, он перемещает изображение спрайта, когда мышь перемещается по родительскому div с использованием события mousemove. мой вопрос жарко тоже работа продолжение mousedown & также работа в мобильном телефоне. код здесьjquery event for mousehold

<html> 
<head> 
<title></title> 
<script type="text/javascript" src="jquery-2.1.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.rotate').on('mousedown', function(e) { 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    //$("#log").text(x +', '+ y); 
    if (x > 0) 
    { 
     $(".rotate img").css({"left":"0px"}); 
    } 

    if (x > 60) 
    { 
     $(".rotate img").css({"left":"-450px"}); 
    } 
    if (x > 120) 
    { 
     $(".rotate img").css({"left":"-900px"}); 
    } 
    if (x > 180) 
    { 
     $(".rotate img").css({"left":"-1350px"}); 
    } 
    if (x > 240) 
    { 
     $(".rotate img").css({"left":"-1800px"}); 
    } 
    if (x > 300) 
    { 
     $(".rotate img").css({"left":"-2250px"}); 
    } 
    if (x > 360) 
    { 
     $(".rotate img").css({"left":"-2700px"}); 
    } 
}); 
}); 
</script> 
<style> 
.rotate 
{max-width:450px; 
    margin:auto; 
    overflow:hidden; 
    border:1px solid #000; 
} 
.rotate img 
{ 
    position: relative; 
    left:-1360px; 
} 
</style> 
</head> 

<body> 
<div class="rotate"> 
<img src="sprite.jpg" /> 
</div> 
</body> 
</html>

источник

2014-12-02 Dinesh

а что ваш вопрос –

запустить таймер (setInterval) с MouseDown и очистить его от MouseUp -.? или искать при событиях 'drag' – Rhumborl

@BojanPetkovski еще раз проверьте вопрос – Dinesh

Я хотел бы использовать vmousedown, vmouseup и vmousemove события в комбинации, чтобы создать правильное поведение (вам нужно JQuery Mobile тоже, что vmouse события работать.

This is a working example :-D, нажмите на что и попробовать его для себя, что должен получить вас достаточно далеко, чтобы делать то, что вам нужно сделать

function move (e) { 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    //$("#log").text(x +', '+ y); 
    if (x > 0) 
    { 
     $(".rotate img").animate({"left":-x.toString()}, 10); 
    } 

} 


$(document).ready(function(){ 
    $('.rotate').on('vmousedown', function (e) { 
     //When mouse is clicked, started following mouse position (move) 
     $(this).on('vmousemove', move); 
     // Stop the select event from occurring (so you don't try an drag the image) 
     e.preventDefault(); 
    }); 
    // Use the mouseup event to unbind the event listener and do any finishing up 
    $('.rotate').on('vmouseup', function (e) { 
     $(this).unbind('vmousemove', move); 
    }); 

});

источник

2014-12-02 12:56:24 SamMorrowDrums

@Dinesh Комментарий к вашему вопросу о setInterval на самом деле не очень полезен. Во-первых, как и у меня, вы можете просто использовать события, но если вы хотите анимацию, вы можете использовать jQuery для анимации CSS в положение для более плавных переходов. Кроме того, в современный день используйте [window.requestAnimationFrame] (https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame), поскольку он позволяет браузеру управлять частотой кадров, для более плавной анимации, которая не работает Не заткнись в браузере. – SamMorrowDrums

@ Dinesh, я ответил на ваш вопрос? Если вы чувствуете, что я, пожалуйста, отметьте свой ответ. В противном случае было что-то не так? Просто хочу убедиться. – SamMorrowDrums

сначала спасибо за помощь, он попробовал ваш код, это было полезно для меня. Я пытаюсь это сделать на моем компьютере, но я столкнулся с проблемой, что она не работает должным образом, изображение не двигалось плавно, как я хочу, но я стараюсь это на jsfiddle, тогда работаю хорошо, но ни один из кодов, работающих на мобильных устройствах. http://jsfiddle.net/y35xswqe/ – Dinesh

jquery event for mousehold

ответ

Смежные вопросы