在鼠標移動時移動div

Question

我試圖採用我在this question中找到的腳本，但將圖像更改爲某些內容似乎比我想象的要困難。

劇本很簡單，應該對mousemove的holder內#content DIV招：

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