简体   繁体   中英

jQuery - mousemove for Mobile

I am trying to recreate the same effect showed below on mobile devices. I have tried to use .vmousemove however, the div only move when I touch and realise. What I am trying to achieve is that the div follows the finger movement on screen.

Is this something possible to achieve with jQuery? Also I can I centre the mouse in the middle of the 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 - px - 100, y = mPos.y - py - 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> 

 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; 
})

I am not sure if it works or not just idea

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM