我在代码中使用Get Hifi中的此插件。我试图在fadeOut上复制fadeIn动画，但我似乎无法破解它。我已在下面发布了脚本及其设置。如果有办法，或者如果有人有类似问题并解决了，请告诉我。抱歉，我无法发布链接，这是一个内部项目。干杯
脚本
/*
* 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 : [ ]
*/
}
]
}
});
});
答案 0 :(得分：0)
我最终使用了另一个使用相同插件的网站的脚本。
/*
* 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'}
]
});
});