2

如果您导航到： http: //laboratory.stratusweb.co.uk/lea/（尚未完成）

您会注意到眼睛跟随光标。

我不明白为什么滚动时眼睛会向下移动页面？

欢迎任何建议！

忘记添加eyes.js 代码：

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.pageX,
            'y' : e.pageY
        };
        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 + 'px',
            });
        });
    })
});
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));
}
4

2 回答 2

3

这一行：

var eyeContainerPosition = $(this).offset();

根据页面滚动的距离返回不同的值——它返回相对于文档顶部的偏移量，而不是窗口顶部。

换线试试

'y' : eyeContainerPosition.top + $(this).height() / 2 +1

和

'y' : eyeContainerPosition.top - $('body').scrollTop() + $(this).height() / 2 +1

来弥补这一点。

于 2012-06-22T14:51:11.757 回答
0

要在滚动时将某些元素保持在屏幕上的固定位置，可以指定 CSS 样式属性position: fixed。

关于位置属性的 W3C 文档。

更新：

当你查看源代码时，你会看到<div class="big_face_holder">持有眼睛的 div 确实已经position: fixed设置好了。

于 2012-06-22T14:41:01.470 回答