jQuery - 用於移動設備的mousemove

我正試圖在移動設備上重現下面顯示的效果。我試過用.vmousemove然而，div只有在我觸摸和實現時纔會移動。我想要實現的是div在屏幕上跟隨手指移動。jQuery - 用於移動設備的mousemove

這是可能實現與jQuery的東西？另外我可以將鼠標置於div的中間位置嗎？

$('#cont').mousemove(function(e) { 
 

 
    var offs = $(this).offset(), 
 
     p = { 
 
     x: offs.left, 
 
     y: offs.top 
 
     }, 
 
     mPos = { 
 
     x: e.pageX, 
 
     y: e.pageY 
 
     }, 
 
     x = mPos.x - p.x - 100, 
 
     y = mPos.y - p.y - 100; 
 
    $('.gray', this).css({ 
 
     left: x, 
 
     top: y, 
 
     backgroundPosition: -x + 'px ' + -y + 'px' 
 
    }); 
 

 
    });

#cont { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
} 
 
.gray { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url('img/grid.png'); 
 
    opacity: 0.9; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5defb2+0,edd92d+46,d156ea+57,7eea9b+100 */ 
 
    background: rgb(93, 239, 178); 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5defb2', endColorstr='#7eea9b', GradientType=1); 
 
    /* IE6-9 fallback on horizontal gradient */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<div id="cont"> 
 
    <div class="gray"></div> 
 

 
</div>

來源

2016-03-02 SNos

也許這將幫助：http://stackoverflow.com/questions/13510999/when-to -use-touchmove-vs-mousemove –

謝謝，我已經注意到，但是，我使用'觸摸移動'具有相同的結果，該div不遵循手指 – SNos

http://stackoverflow.com/questions/1517924/ JavaScript的映射觸摸事件到下鼠標事件 – chiliNUT

var timer; 
$('#cont').mousemove(function(e) { 
    timer = window.setTimeout(function() { 
var offs = $(this).offset(), 
     p = { 
     x: offs.left, 
     y: offs.top 
     }, 
     mPos = { 
     x: e.pageX, 
     y: e.pageY 
     }, 
     x = mPos.x - p.x - 100, 
     y = mPos.y - p.y - 100; 
    $('.gray', this).css({ 
     left: x, 
     top: y, 
     backgroundPosition: -x + 'px ' + -y + 'px' 
    }); 
},10000) 
    return false; 
})

我不知道是否有用，或者不只是想法

來源

2016-03-02 07:01:20

不工作..這只是延遲觸摸事件 – SNos

jQuery - 用於移動設備的mousemove

回答

相關問題