2

このような（またはこのようなさらに複雑な） 「ページ 'マップ'-概要」を作成しようとしましたが、計算に固執し、どこでどのように問題を解決できるかわかりません。

これまでに行ったことは次のとおりです。

var Overview = (function() {

    $('.spot').each(function() {
        var el = $(this),
            map = $('#map'),
            point = document.createElement('span');

        point.className = 'point';
        map.append(point);

        var offsetX = el.offset().left, // Might the problem is here,
            offsetY = el.offset().top, // and here?!
            winW = $(window).width(),
            winH = $(window).height(),

            mapWidth = map.width() - $(point).width(),
            mapHeight = map.height() - $(point).height(),

            posX = offsetX / winW * mapWidth,
            posY = offsetY / winH * mapHeight;

        $(point).css({
            top: posY,
            left: posX
        });
    });

})();

問題がどこにあるのかわかりません。計算を修正または改善する方法はありますか?

4

1 に答える 1

1

わかりました、私は自分でそれを修正しました。多分それは他の誰かを助ける：

var Overview = function() {
    $('body').append('<div class="minimapWrapper"><div class="miniMap"><i class="cursor"></i></div></div>');

    var holder = $("#holder"),
        miniMap = $(".miniMap"),
        spots = holder.find('.spot'),
        holderPos = holder.offset();

    if (spots.length > 0) {
        var holderW = holder.width(),
            holderH = holder.height(),
            mapW = miniMap.width(),
            mapH = miniMap.height();

        spots.each(function() {
            var point = $(this),
                pointPos = point.offset(),
                top = pointPos.top - holderPos.top,
                left = pointPos.left - holderPos.left,

                marker = $(document.createElement('span')),
                markerTop = (mapH * top) / holderH,
                markerLeft = (mapW * left) / holderW;

            markerTop = Math.abs(markerTop);
            markerLeft = Math.abs(markerLeft);

            marker.css({
                top: markerTop,
                left: markerLeft
            })[0].className = 'marker';

            miniMap.append(marker);

            marker.click(function() {
                $('html,body').animate({
                    scrollTop: pointPos.top,
                    scrollLeft: pointPos.left
                });
                return false;
            });
        });
    }
};
于 2012-12-21T21:08:35.067 に答える