javascript - 鼠标移动时移动 div

Question

我正在尝试采用我在 this question 中找到的脚本，但是将图像更改为某些内容似乎比我想象的要困难。

该脚本非常简单，应该使 #content div 在 mousemove 上移动到 holder 内:

// written by Roko C. Buljan

var $mmGal = $('#holder'),
      $mmImg = $('#content'),
      damp = 10, // higher number = smoother response
      X = 0, Y = 0,
      mX = 0, mY = 0,
      wDiff, hDiff,
      zeno;

  function motion(){
    zeno = setInterval(function(){ // Zeno's paradox "catching delay"
      X += (mX-X) / damp; 
      Y += (mY-Y) / damp;        
      $mmGal.scrollLeft(X*wDiff).scrollTop(Y*hDiff);
    }, 26);
  }

  // Get image size after it's loaded and run our fn  
  $mmImg.one('load', function() {   
    wDiff = ( this.width/$mmGal.width() )-1,          
    hDiff = (this.height/$mmGal.height())-1; 
  }).each(function() {
    if(this.complete) $(this).load();
  });


  $mmGal.mousemove(function(e) {
    mX = e.pageX-this.offsetLeft;
    mY = e.pageY-this.offsetTop;  
  }).hover(function( e ){
    return e.type=='mouseenter'? motion() : setTimeout(function(){
      clearInterval(zeno);
    },1200); // clear if not used
  });

为什么 div #content 不移动(文本和图像)？

Example JSBIN

Answer 1

我更新了演示并在移动背景图像上添加了内容。

查看演示:

$(function(){
  
  var $mmGal = $('#mmGal'),
      $mmImg = $('#mmImg'),
      damp = 10, // higher number = smoother response
      X = 0, Y = 0,
      mX = 0, mY = 0,
      wDiff, hDiff,
      zeno;
 
  function motion(){
    zeno = setInterval(function(){ // Zeno's paradox "catching delay"
      X += (mX-X) / damp; 
      Y += (mY-Y) / damp;        
      $mmGal.scrollLeft(X*wDiff).scrollTop(Y*hDiff);
    }, 26);
  }
  
  // Get image size after it's loaded and run our fn  
  $mmImg.one('load', function() {   
    wDiff = ( this.width/$mmGal.width() )-1,          
    hDiff = (this.height/$mmGal.height())-1; 
  }).each(function() {
    if(this.complete) $(this).load();
  });
  
   
  $mmGal.mousemove(function(e) {
    mX = e.pageX-this.offsetLeft;
    mY = e.pageY-this.offsetTop;  
  }).hover(function( e ){
    return e.type=='mouseenter'? motion() : setTimeout(function(){
      clearInterval(zeno);
    },1200); // clear if not used
  });

});

*{margin:0;padding:0;}
.main-wrapper {
  position: relative;
  width:150px;
  height:150px;
}
#mmGal{
    position:relative;
    margin: 20px auto;
    width:412px;
    height:220px;
    overflow:hidden;
    background:#eee;
    z-index: 0;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  color: #ffffff;
  padding: 10px;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-wrapper">
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. quae molestias ad dolores qui blanditiis,   Quas eaque soluta quia ipsa?  aliquam?</p>
</div>
<div id="mmGal">
   <img id="mmImg" src="http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg">
</div>
</div>