Question

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

脚本非常简单，应该让#content div移到holder上的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不移动（文字和图片）？

Example JSBIN

Answer 1

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

查看演示：

＆＃13;

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

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我的original script使用.load()加载底图图像。由于您没有要移动的背景图片-您不一定需要该代码部分。
在w/hDiff事件中计算mousemove。
另外，使用jQuery的.outerWidth()和.innerWidth()进行计算：

jQuery(function($) {

  const $mm = $('#holder'),
        $mmCont = $('#content'),
        damp = 10; // 1 = immediate, higher number = smoother response

  let X = 0, Y = 0,
      mX = 0, mY = 0,
      wDiff = 0, hDiff = 0,
      zeno, tOut;

  $mm.on({
    mousemove(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);
      clearInterval(zeno);
      zeno = setInterval(function() { // Zeno's paradox "catching delay"
        X += (mX - X) / damp;
        Y += (mY - Y) / damp;
        // Use CSS transition:
        // $mmCont.css({ transform: `translate(${-X * wDiff}px, ${-Y * hDiff}px)` });
        // Use Scroll:
        $mm[0].scrollTo(X * wDiff, Y * hDiff);
      }, 26);
    },
    mouseleave() {
      // Allow the image to move for some time even after mouseleave
      tOut = setTimeout(function() {
        clearInterval(zeno);
      }, 1200);
    }
  });
});

#holder {
  background: gray;
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 180px;
}

#content {
  width: 150%;
  height: 600px;
  background: lightgray;
  padding: 40px;
}

<div id="holder">
  <div id="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolore impedit dignissimos porro repellendus numquam aut quibusdam, consequuntur modi facere? Totam ut libero corporis sit sequi explicabo ab magni quaerat unde animi aliquid facere
      necessitatibus, quae molestias ad dolores qui blanditiis, quisquam minima beatae autem iure. Neque animi tempore iste accusamus ut cum ipsam possimus, perspiciatis quia illo obcaecati sed molestiae amet architecto, nostrum cumque quaerat minima
      minus, consequatur rem error nihil. Ipsa eveniet, praesentium suscipit optio blanditiis at, vel illum harum omnis quam. Quas eaque soluta quia ipsa? Illum inventore veritatis facilis eveniet voluptatibus atque laborum necessitatibus adipisci aliquam?</div>
    <img src="https://i.stack.imgur.com/BfcTY.jpg">
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

鼠标移动时移动div

2 个答案: