Javascript 鼠标移动时移动div

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

脚本非常简单，应该使

#content

div在

mousemove

上的

支架内移动：

// 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
不移动（文本和图像）

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

查看演示：


$（函数（）{
变量$mmGal=$（'#mmGal'），
$mmImg=$（“#mmImg”），
阻尼=10，//数值越大=响应越平稳
X=0，Y=0，
mX=0，mY=0，
wDiff，hDiff，
泽诺；
函数运动（）{
zeno=setInterval（函数（）{//zeno悖论“捕捉延迟”
X+=（mX-X）/阻尼；
Y+=（mY-Y）/潮湿；
$mmGal.scrollLeft（X*wDiff）.scrollTop（Y*hDiff）；
}, 26);
}
//加载后获取图像大小并运行我们的fn
$mmImg.one（'load'，function（）{
wDiff=（this.width/$mmGal.width（））-1，
hDiff=（this.height/$mmGal.height（））-1；
}).each（函数（{
如果（this.complete）$（this.load（）；
});
$mmGal.mousemove（函数（e）{
mX=e.pageX-this.offsetLeft；
mY=e.pageY-this.offsetTop；
}).悬停（功能（e）{
返回e.type=='mouseenter'？motion（）：setTimeout（function（））{
净空间隔（zeno）；
}，1200）；//如果不使用，则清除
});
});
*{margin:0；padding:0；}
.主包装{
位置：相对位置；
宽度：150px；
高度：150像素；
}
#嗯{
位置：相对位置；
保证金：20px自动；
宽度：412px；
高度：220px；
溢出：隐藏；
背景：#eee；
z指数：0；
}
.内容{
位置：绝对位置；
左：0；
右：0；
排名：0；
颜色：#ffffff；
填充：10px；
z指数：1；
}

Lorem ipsum dolor sit amet，奉献精英。什么样的分子是温和的，什么样的解决方案是温和的？阿利夸姆

My使用
.load（）
加载参考底图图像。由于您没有要移动的背景图像，因此不必使用该代码部分。

在
mousemove
事件中计算
w/hDiff
。

另外，使用jQuery的
.outerWidth（）
和
.innerWidth（）
进行计算：


jQuery（函数（$）{
常量$mm=$（“#持有者”），
$mmCont=$（“#内容”），
阻尼=10；//1=立即，数字越大=响应越平稳
设X=0，Y=0，
mX=0，mY=0，
wDiff=0，hDiff=0，
泽诺，吹牛；
$mm.on({
鼠标移动（ev）{
wDiff=（$mmCont.innerWidth（）/$mm.outerWidth（））-1，
hDiff=（$mmCont.innerHeight（）/$mm.outerHeight（））-1；
mX=ev.pageX-this.offsetLeft；
mY=ev.pageY-this.offsetTop；
},
mouseenter（）{
clearTimeout（tOut）；
净空间隔（zeno）；
zeno=setInterval（函数（）{//zeno悖论“捕捉延迟”
X+=（mX-X）/阻尼；
Y+=（mY-Y）/潮湿；
//使用CSS转换：
//$mmCont.css（{transform:`translate（${-X*wDiff}px，${-Y*hDiff}px）`}）；
//使用滚动：
$mm[0]。滚动到（X*wDiff，Y*hDiff）；
}, 26);
},
mouseleave（）{
//允许图像移动一段时间，即使在鼠标移动后
tOut=setTimeout（函数（）{
净空间隔（zeno）；
}, 1200);
}
});
});
#支架{
背景：灰色；
宽度：100%；
位置：相对位置；
溢出：隐藏；
高度：180像素；
}
#内容{
宽度：150%；
高度：600px；
背景：浅灰色；
填充：40px；
}

Lorem ipsum dolor sit amet，奉献精英。多洛尔先生是否妨碍了新移民和基布斯丹的尊严？自由人的权利在动物流动性的脸上得到了明确的体现
必要性，是一种需要，是一种需要，是一种需要，是一种需要，是一种需要，是一种需要，是一种需要，是一种需要，是一种需要。暂时性动物是一种累积性动物，是一种透明性动物，是一种建筑师，是一种最小质量的灵丹妙药
减去，消耗rem误差nihil。国际公共部门会计准则（Ipsa eveniet），适用于全方位照明水平的选择性布兰迪提斯研究所（Praesenium suscipit optio blanditiis at）。什么是解决方案？发明者的真实脸孔是否能在必要的实验室工作？
要移动内容还是只移动图像？我要移动整个div
#content
，因此文本和图像：）