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 に答える