Question

我创建了javascript / jquery程序，当使用mousemove事件将鼠标移动到父div上时，它会移动精灵图像。我的问题很热，还有工作继续mousedown＆amp;也适用于移动设备。代码在这里

    <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>

Answer 1

我会结合使用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); 
    });

});

用于mousehold的jquery事件

1 个答案: