jQuery - 鼠标移动移动移动

jQuery - mousemove for Mobile

本文关键字：移动 鼠标 jQuery      更新时间：2023-09-26

我正在尝试在移动设备上重现下面显示的相同效果。我尝试使用.vmousemove但是，只有当我触摸并意识到时，div才会移动。我试图实现的是，div跟随屏幕上的手指运动。

这可以通过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>

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

我不确定它是否有效

相关文章：