用于可缩放交互式地图的 jQuery 插件

Question

我正在使用 Get Hifi 中的这个插件我的代码。我试图在淡出时复制淡入动画，但我似乎无法破解它。我已在下面发布了脚本及其设置。请告诉我是否有办法做到这一点，或者是否有人遇到类似的问题并解决了。抱歉，我无法发布链接，这是一个内部项目。干杯

脚本

/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
* TODO:
* 1. Create API
* 2. Address accesibility automatically
* 3. Make object oriented
*/
(function($) {
$.fn.zoommap = function(settings) {
    settings = $.extend({
        zoomDuration: 100,
        zoomClass: 'zoomable',
        popupSelector: 'div.popup',
        popupCloseSelector: 'a.close',
        bulletWidthOffset: '10px',
        bulletHeightOffset: '10px',
        showReturnLink: true,
        returnId: 'returnlink',
        returnText: 'Return to Previous Map'
    }, settings);

    $(this).each(function(){
        var map = $(this);
        $(this).data('currentId', '');

        /******* Show Map by ID ************/
        $(this).bind('showMap', function(e, id, value){
            alert(id);
            showMapById(id);        
            //return this?
        });
        function showMapById(id){
            var region = findRegion(settings.map, id);
            if(region != -1){
                displayMap(region);
            }
        }

        // recursive id find
        function findRegion(root, id){
            if(root.id == id){
                return root;
            }else{
                if(root.maps != undefined){
                    for(var i=0; i<root.maps.length; i++){
                        return findRegion(root.maps[i], id);
                    }
                }
            }
            return -1;
        }

        // region is a map
        // This gets called every time we zoom
        function displayMap(region){
            //Set Current Region Id
            $(this).data('currentId', region.id);

            //Clear the Map and Set the Background Image
            map.empty().css({
                backgroundImage: 'url(' + region.image + ')',
                width: settings.width,
                height: settings.height
            });

            //Load RegionData
            loadRegionData(region);
        }
        /************************************************************************************/


        //Show Return Link
        function showReturnLink(region){
            map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
            $('#' + settings.returnId).hide().fadeIn().click(function(){
                showMapById(region.parent);
                $(this).remove();
            });
        }

        //Load the Bullets 
        function loadRegionData(region){
            var url = region.data;
            map.load(url, {}, function(){
                //place bullets
                $(this).children('a.bullet').each(function(){
                    var coords = $(this).attr('rel').split('-');
                    $(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
                           .hide()
                           .click(function(){showPopup($(this).attr('id'));})
                           .fadeIn('fast');                         
                });
                //Set up each submap as an item to click
                if(region.maps != undefined){
                    for(var i=0; i<region.maps.length; i++){
                        addZoom(region.maps[i]);
                    }
                }
                //Create Return Link
                if(settings.showReturnLink && region.parent != undefined){
                    showReturnLink(region);
                }                       
            });
        }

        function showPopup(id, leftbul, topbul){
            map.find(settings.popupSelector).fadeOut(); 
            var boxid = '#' + id + '-box';

            $(boxid).fadeIn();
            $(settings.popupCloseSelector).click(function(){
                $(this).parent().fadeOut();
            });
        }

        //add a clickable image for a region on the current map
        function addZoom(region){
            $('<img />').addClass(settings.zoomClass)
                .attr({
                    src: settings.blankImage,
                    id: region.id
                }).css({
                    position: 'absolute',
                    width: region.width,
                    height: region.height,
                    top: region.top,
                    left: region.left,
                    cursor: 'pointer'
                }).appendTo(map).click(function(){
                    //hide neighboring bullets and zoomables
                    var width = settings.width;
                    var height = settings.height;
                    if(region.scan){
                        width = region.scanwidth;
                        height = region.scanheight;
                    }
                    $(this).siblings().fadeOut();
                    $(this).load(function(){
                                $(this).fadeIn('fast')
                                       .animate({
                                            width: width,
                                            height: height,
                                            top: '0px',
                                            left: '0px'
                                        }, settings.zoomDuration, '', function(){
                                            displayMap(region);
                                        });
                            });
                    $(this).siblings().fadeOut();
                    $(this).hide().attr('src', region.image);
                });
        }

        function rempx(string){
            return Number(string.substring(0, (string.length - 2)));
        }

        function addpx(string){
            return string + 'px';
        }

        function showHash(string){
            string = string.replace('#', '');
            showMapById(string);
        }

        //initialize map
        var hash = self.document.location.hash;
        if(hash.length > 0)
            showHash(hash);
        else{
            displayMap(settings.map);
        }

        return this;
    });
}

})(jQuery);

设置

$(document).ready(function(){

/* Show jQuery is running */
$('h1').css({textDecoration: 'underline'});

$('#map').zoommap({
    // Width and Height of the Map
    width: '437px',
    height: '611px',

    //Misc Settings
    blankImage: 'images/blank.gif',
    zoomDuration: 500,
    bulletWidthOffset: '10px',
    bulletHeightOffset: '10px',

    //ids and classes
    zoomClass: 'zoomable',
    popupSelector: 'div.popup',
    popupCloseSelector: 'a.close',

    //Return to Parent Map Link
    showReturnLink: true,
    returnId: 'returnlink',
    returnText: 'return to main map',

    //Initial Region to be shown
    map: {
        id: 'north_island',
        image: 'images/nz-map.jpg',
        data: 'map_data/north_island.html',
        maps: [
        {
            id: 'south_island',
            parent: 'north_island',
            image: 'images/nz-map-auckland.jpg',
            data: 'map_data/south_island.html',
            width: '200px',
            height: '232px',
            top: '18px',
            left: '176px'
            /* More maps can be nested
            maps : [ ]
            */
        }
        ]
    }
});

});

Answer 1

我最终使用了另一个使用相同插件的网站的脚本。

/*
* Copyright (C) 2009 Joel Sutherland
* Licenced under the MIT license
*/
(function($) {
$.fn.zoommap = function(settings) {
    settings = $.extend({
        // Width and Height of the Map Area
        width: '437px',
        height: '611px',

        //Misc Settings
        blankImage: 'images/blank.gif',
        loadingImage: 'images/blank.gif',
        fadeDuration: 500,
        zoomDuration: 1000,

        //ids and classes
        bulletClass: 'zoomable',
        popupSelector: 'div.popup',
        popupCloseSelector: 'a.close',

        //Return to Initial Region Link
        homeId: 'homelink',
        homeText: 'Return to Full Map',

        //Initial Region to be shown
        initialRegion: {},

        //Zoomable Regions
        zoomableRegions: []
    }, settings);

    var map = $(this);

    //Set up initial Map Area and the initial region that is shown
    function initializeMap(){
        map.fadeOut(settings.fadeDuration, function(){
            $(this).empty().css({
                width: settings.width,
                height: settings.height,
                backgroundImage: 'url(' + settings.initialRegion.image + ')',
                position: 'relative'
            });
            $(this).fadeIn();
            loadBullets(settings.initialRegion, false);
        });
    }

    //Load the Bullets
    function loadBullets(region, showHomeLink){
        map.load(region.data, {}, function(){
            //add back button
            if(showHomeLink){
                $('<a id="' + settings.homeId + '" href="javascript:void(0)"><span>' + settings.homeText + '</span></a>')
                    .appendTo(map)
                    .click(function(){initializeMap()});
            }
            else{
                for(var i=0; i<settings.zoomableRegions.length; i++){
                    addZoomable( settings.zoomableRegions[i] );
                }
            }
            //place bullets
            $(this).children('a.bullet').each(function(){
                var coords = $(this).attr('rel').split('-');
                $(this).css({left: coords[0] + 'px', top: coords[1] + 'px'})
                       .hide()
                       .fadeIn()
                       .click(function(){showPopup($(this).attr('id'));});
            });
        });
    }

    function addZoomable( subregion ){
        $('<img class="' + settings.bulletClass + '" src="' + settings.blankImage + '" id="' + subregion.id + '" />').css({
            border: 'none',
            position: 'absolute',
            width: subregion.width,
            height: subregion.height,
            top: subregion.top,
            left: subregion.left,
            cursor: 'pointer'
        }).appendTo(map).click(function() {
            $(this).siblings().fadeOut();
            $(this).hide()
                   .attr('src', subregion.image)
                   .fadeIn('slow')
                   .animate({
                        width: settings.width,
                        height: settings.height,
                        top: '0px',
                        left: '0px'
                    }, settings.zoomDuration, '', function(){
                        map.css({backgroundImage: 'url(' + subregion.image + ')'}).empty();
                        loadBullets(subregion, true);
                    });
        });
    }



    function showPopup(id){
        map.find(settings.popupSelector).fadeOut();
        var boxid = '#' + id + '-box';
        $(boxid).fadeIn();
        $(settings.popupCloseSelector).click(function(){
            $(this).parent().fadeOut();
        });
    }


    //initialize map
    initializeMap();

}
})(jQuery);
$(document).ready(function(){

$('div.map').zoommap({
    width: '437px',
    height: '611px',
    initialRegion: {
        id: 'new_zealand',
        image: 'images/nz-map.jpg',
        data: 'map_data/blank.html'},
    zoomableRegions: [
        {
            id: 'northland',
            parent: 'new_zealand',
            image: 'images/nzmap-northland.jpg',
            data: 'map_data/south_island.html',
            width: '90px',
            height: '60px',
            top: '0px',
            left: '218px'},
        {
            id: 'auckland',
            parent: 'new_zealand',
            image: 'images/nzmap-auckland.jpg',
            data: 'map_data/south_island.html',
            width: '220px',
            height: '125px',
            top: '71px',
            left: '218px'},
        {
            id: 'wellington',
            parent: 'new_zealand',
            image: 'images/nzmap-wellington.jpg',
            data: 'map_data/south_island.html',
            width: '180px',
            height: '120px',
            top: '207px',
            left: '219px'},
        {
            id: 'southland',
            parent: 'new_zealand',
            image: 'images/nzmap-southland.jpg',
            data: 'map_data/south_island.html',
            width: '210px',
            height: '240px',
            top: '338px',
            left: '50px'}
        ]
});
});