jQuery - 移动眼睛 - 不直接看!?

时间:2012-06-29 09:03:45

标签: jquery html mousemove

再次对眼睛有点麻烦......

我已经修复了一切我可以分开的东西,从现在开始,眼睛看不直接? 如果我将'big_face_holder'div移动几百个像素,那么它似乎有效。除此之外,我不知道。

相关网站:http://laboratory.stratusweb.co.uk/lea/

有问题的代码:

var windowX = -1;
var windowY = -1;
jQuery(document).ready(function() {
    var canvas = document.getElementById("debugCanvas");
    canvas.width = document.width;
    canvas.height = document.height;
    jQuery(document).mousemove(function(e) {
        var mousePosition = {
            'x' : e.screenX,
            'y' : e.screenY
        };
        var context = document.getElementById("debugCanvas").getContext("2d");
        jQuery(".eyeContainer").each(function(i, i2) {
            var eyeContainerPosition = $(this).offset();
            var eyePosition = {
                'x' : eyeContainerPosition.left + $(this).width() / 2 +1,
                'y' : eyeContainerPosition.top - $('body').scrollTop() + $(this).height() / 2 +1
            }
            var slope = getSlope(eyePosition, mousePosition);
            var toCenterdistance = getDistance(eyePosition, mousePosition);
            var targetDistance = toCenterdistance - ($(this).width() / 2);
            if(toCenterdistance > ($(this).width() / 2)) {
                var x = Math.cos(Math.atan(slope)) * targetDistance;
                if(eyePosition.x > mousePosition.x) {
                    x += mousePosition.x;
                } else if(eyePosition.x < mousePosition.x) {
                    x = -x + mousePosition.x;
                }
                var y = Math.sin(Math.atan(slope)) * targetDistance;
                if(eyePosition.x > mousePosition.x) {
                    y += mousePosition.y;
                } else if(eyePosition.x < mousePosition.x) {
                    y = -y + mousePosition.y;
                }
                x -= $(this).height() / 2;
                y -= $(this).height() / 2;
            } else {
                x = mousePosition.x - ($(this).width() / 2);
                y = mousePosition.y - ($(this).width() / 2);
            }
            var element=$("#eyeBall_" + $(this).attr("rel"));
            element.css({
                'left' : x + 'px',
                'top' : y + '1px',
            });
        });
    })
});
function getSlope(loc1, loc2) {
    return (loc1.y - loc2.y) / (loc1.x - loc2.x);
}
function getDistance(loc1, loc2) {
    return Math.sqrt(Math.pow((loc1.x - loc2.x), 2) + Math.pow((loc1.y - loc2.y), 2));
}

0 个答案:

没有答案