Question

我正在尝试重新创建下面在移动设备上显示的相同效果。我曾尝试使用.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>

Answer 1

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

我不确定它是否有效只是想法

jQuery - 用于移动设备的mousemove

1 个答案: