zoommap地图放大和交互jquery特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 zoommap地图放大和交互jquery特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图放大和交互效果jquery插件zoommap</title>
<style type="text/css">@import "zoommap.css";</style>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="zoommap.js"></script>
	<script type="text/javascript" src="setup.js"></script>
</head>
<body>
<h1>Zoom Map Example</h1>
<div id="map"></div>
</body>
</html>

JS代码(setup.js):

$(document).ready(function(){
	/* Show jQuery is running */
$('h1').css({
	textDecoration:'underline'}
);
	$('#map').zoommap({
	// Width and Height of the Mapwidth:'500px',height:'580px',//Misc SettingsblankImage:'images/blank.gif',zoomDuration:1000,bulletWidthOffset:'10px',bulletHeightOffset:'10px',//ids and classeszoomClass:'zoomable',popupSelector:'div.popup',popupCloseSelector:'a.close',//Return to Parent Map LinkshowReturnLink:true,returnId:'returnlink',returnText:'return to campus map',//Initial Region to be shownmap:{
	id:'campus',image:'images/campus.jpg',data:'popups/campus.html',maps:[{
	id:'quads',parent:'campus',image:'images/quads.png',data:'popups/quads.html',width:'200px',height:'232px',top:'18px',left:'176px'/* More maps can be nestedmaps:[ ]*/
}
]}
}
);
}
);

JS代码(zoommap.js):

/** 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:1000,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','');
	function showMapById(id){
	var region = findRegion(settings.map,id);
	if(region != -1){
	displayMap(region);
}
}
// recursive id findfunction findRegion(root,id){
	if(root.id == id){
	return root;
}
else{
	if(root.maps != undefined){
	for(var i=0;
	i<root.maps.length;
	i++){
	var possible = findRegion(root.maps[i],id);
	if(possible != -1)return possible;
}
}
}
return -1;
}
// region is a map// This gets called every time we zoomfunction displayMap(region){
	//Set Current Region Id$(this).data('currentId',region.id);
	//Clear the Map and Set the Background Imagemap.empty().css({
	backgroundImage:'url(' + region.image + ')',width:settings.width,height:settings.height}
);
	var check = map.css('background-image');
	//Load RegionDataloadRegionData(region);
}
/************************************************************************************/
//Show Return Linkfunction showReturnLink(region){
	map.append('<a href="javascript:void(0);
	" id="' + settings.returnId + '">' + settings.returnText + '</a>');
	$('#' + settings.returnId).hide().fadeIn().click(function(){
	showMapById(region.parent);
}
);
}
//Load the Bulletsfunction 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 clickif(region.maps != undefined){
	for(var i=0;
	i<region.maps.length;
	i++){
	addZoom(region.maps[i]);
}
}
//Create Return Linkif(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 mapfunction 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 zoomablesvar width = settings.width;
	var height = settings.height;
	if(region.scan){
	width = region.scanwidth;
	height = region.scanheight;
}
$(this).siblings().fadeOut();
	$(this).hide() .attr('src',region.image).load(function(){
	$(this).fadeIn('slow') .animate({
	width:width,height:height,top:'0px',left:'0px'}
,settings.zoomDuration,'',function(){
	displayMap(region);
}
);
}
);
}
);
}
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 mapvar hash = self.document.location.hash;
	if(hash.length > 0)showHash(hash);
	else{
	displayMap(settings.map);
}
return this;
}
);
}
}
)(jQuery);

CSS代码(zoommap.css):

#map{position:relative;width:700px;height:470px;overflow:hidden;}
#returnlink{display:block;position:absolute;bottom:0;right:0;color:white;background:blue;padding:3px;}
#map a.bullet{display:block;position:absolute;width:20px;height:20px;background:yellow;text-decoration:none;border:1px solid red;opacity:.7;z-index:2;}
#map img.zoomable{}
#map div.popup{display:none;position:absolute;width:200px;top:100px;left:150px;background:white;z-index:3;padding:10px;border:2px solid black;}
#map div.popup a.close{display:block;position:absolute;bottom:0;right:0;}

附件:下载该文件资源,减少时间成本(增值服务)