尝试对鼠标指针的多个元素进行评分

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>