嘗試對鼠標指針的多個元素進行評分

Question

我正在嘗試向我的鼠標指針旋轉多個元素。它看起來像是在工作，但它們都在相同的方向旋轉，而不是對我的鼠標。我假設他們中的一個跟隨我的鼠標，其餘的跟那個角度一樣。

我該如何旋轉，然後單獨對着我的鼠標？難道我做錯了什麼？

有人可以解釋我如何讓他們都指向我的鼠標？

$(function() { 
 
    $('.js-follow-mouse').followMouse(); 
 
}); 
 

 
$.fn.followMouse = function() { 
 
    return $(this).each(function(index, item) { 
 
    item = $(item); 
 
    if (!item.data('FollowMouse')) { 
 
     item.data('FollowMouse', new FollowMouse(item)); 
 
    } 
 
    }); 
 
}; 
 

 
var FollowMouse = function(element) { 
 
    this.element = element; 
 
    mousePos = { 
 
    x: -1, 
 
    y: -1 
 
    }; 
 
    $('body').on('mousemove', this.rotateObject.bind(this)); 
 
}; 
 

 
FollowMouse.prototype.rotateObject = function() { 
 
    mousePos.x = event.pageX; 
 
    mousePos.y = event.pageY; 
 
    var curPos = { 
 
    x: $('img').offset().left, 
 
    y: $('img').offset().top 
 
    }; 
 
    var nextPos = { 
 
    x: mousePos.x, 
 
    y: mousePos.y 
 
    }; 
 
    $(this.element).find('img').each(function() { 
 
    offsetLeft = mousePos.x - $(this).offset().left; 
 
    offsetTop = mousePos.y - $(this).offset().top; 
 
    deg = (Math.atan2(nextPos.y - curPos.y, nextPos.x - curPos.x) * 180/Math.PI); 
 
    $(this).css({ 
 
     '-webkit-transform': 'rotate(' + deg + 'deg)', 
 
     '-moz-transform': 'rotate(' + deg + 'deg)', 
 
     '-ms-transform': 'rotate(' + deg + 'deg)', 
 
     '-o-transform': 'rotate(' + deg + 'deg)', 
 
     'transform': 'rotate(' + deg + 'deg)' 
 
    }); 
 
    }); 
 
};

.pencil img { 
 
    height: 5px; 
 
    width: 20px; 
 
    background-color: #000000; 
 
} 
 
.pencil-2 { 
 
    margin-left: 150px 
 
} 
 
body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="js-follow-mouse"> 
 
    <div class="pencil"><img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""></div> 
 
    <div class="pencil pencil-2"><img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""></div> 
 
</div>

感謝

Answer 1

好主意。你curPos參數只需要重新定義每幅圖像的each循環中：

$(function() { 
 
    $('.js-follow-mouse').followMouse(); 
 
}); 
 

 
$.fn.followMouse = function() { 
 
    return $(this).each(function(index, item) { 
 
    item = $(item); 
 
    if (!item.data('FollowMouse')) { 
 
     item.data('FollowMouse', new FollowMouse(item)); 
 
    } 
 
    }); 
 
}; 
 

 
var FollowMouse = function(element) { 
 
    this.element = element; 
 
    mousePos = { 
 
    x: -1, 
 
    y: -1 
 
    }; 
 
    $('body').on('mousemove', this.rotateObject.bind(this)); 
 
}; 
 

 
FollowMouse.prototype.rotateObject = function() { 
 
    mousePos.x = event.pageX; 
 
    mousePos.y = event.pageY; 
 
    var curPos = { 
 
    x: $('img').offset().left, 
 
    y: $('img').offset().top 
 
    }; 
 
    var nextPos = { 
 
    x: mousePos.x, 
 
    y: mousePos.y 
 
    }; 
 
    $(this.element).find('img').each(function() { 
 

 
    curPos.x = $(this).offset().left, 
 
     curPos.y = $(this).offset().top; 
 
    // curPos just needs to be defined for each image 
 
    offsetLeft = mousePos.x - $(this).offset().left; 
 
    offsetTop = mousePos.y - $(this).offset().top; 
 
    deg = (Math.atan2(nextPos.y - curPos.y, nextPos.x - curPos.x) * 180/Math.PI); 
 
    $(this).css({ 
 
     '-webkit-transform': 'rotate(' + deg + 'deg)', 
 
     '-moz-transform': 'rotate(' + deg + 'deg)', 
 
     '-ms-transform': 'rotate(' + deg + 'deg)', 
 
     '-o-transform': 'rotate(' + deg + 'deg)', 
 
     'transform': 'rotate(' + deg + 'deg)' 
 
    }); 
 
    }); 
 
};

.pencil img { 
 
    height: 5px; 
 
    width: 20px; 
 
    background-color: #000000; 
 
} 
 
.pencil-2 { 
 
    margin-left: 150px 
 
} 
 
body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="js-follow-mouse"> 
 
    <div class="pencil"> 
 
    <img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""> 
 
    </div> 
 
    <div class="pencil pencil-2"> 
 
    <img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""> 
 
    </div> 
 
</div>