我做了一个多层地图，然后在其上放置了一个div。但问题是，当我缩放图像时，div应该将其位置更改为其他任何位置。例如，如果我在印度放置div，但是当我放大并拖动它div是美国或任何地方时。但我希望它置于实际位置。
这是我的代码：
window.wheelzoom = (function() {
var defaults = {
zoom: 0.10
};
var canvas1 = document.createElement('canvas');
var canvas = document.createElement('div');
var main = function(img1, options) {
//if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }
var settings = {};
var width;
var width1;
var height;
var height1;
var bgWidth;
var bgHeight;
var bgPosX;
var bgPosY;
var previousEvent;
var cachedDataUrl;
//console.log(img1.childNodes);
var img = img1.childNodes[1];
img1 = img1.childNodes[3]
function setSrcToBackground(img, id) {
img.style.backgroundImage = 'url("' + img.src + '")';
//$("#"+id).append("<h1 style='z-index:1;'>BHumoiraj</h1>")
canvas.width = img.naturalWidth;
canvas.id = "raj";
canvas.height = img.naturalHeight;
cachedDataUrl = canvas1.toDataURL();
img.src = cachedDataUrl;
}
function updateBgStyle() {
if (bgPosX > 0) {
bgPosX = 0;
} else if (bgPosX < width - bgWidth) {
bgPosX = width - bgWidth;
}
if (bgPosY > 0) {
bgPosY = 0;
} else if (bgPosY < height - bgHeight) {
bgPosY = height - bgHeight;
}
img.style.backgroundSize = bgWidth + 'px ' + bgHeight + 'px';
var bd = Math.abs(bgPosY);
var cd = Math.abs(bgPosX);
if (bgWidth < 1281) {
img.style.backgroundImage = 'url("http://blogs-images.forbes.com/trevornace/files/2016/02/political-map-world-1200x813.jpg")';
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
}
if (bgWidth > 1281 && bgWidth < 2283) {
img.style.backgroundImage = 'url("http://www.vector-eps.com/wp-content/gallery/administrative-europe-map-vector-and-images/administrative-europe-map-image2.jpg")';
img.style.border = "2px solid red";
}
if (bgWidth > 2283) {
img.style.backgroundImage = 'url("http://laraveldaily.com/wp-content/uploads/2016/08/World-Map-Blue.jpg")';
//img.style.backgroundSize = 2000+'px '+bgHeight+'px';
}
img.style.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px';
// img1.style.top = bgPosY;//"-90px" ;
// img1.style.left = bgPosX;//"120px";
}
function reset() {
bgWidth = width;
bgHeight = height;
img1.style.top = height1 //"-90px" ;
img1.style.left = width1; //"120px";
bgPosX = bgPosY = 0;
updateBgStyle();
}
function onwheel(e) {
var deltaY = 0;
e.preventDefault();
if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
deltaY = e.deltaY;
} else if (e.wheelDelta) {
deltaY = -e.wheelDelta;
}
var rect = img.getBoundingClientRect();
var offsetX = e.pageX - rect.left - window.pageXOffset;
var offsetY = e.pageY - rect.top - window.pageYOffset;
var bgCursorX = offsetX - bgPosX;
var bgCursorY = offsetY - bgPosY;
var bgRatioX = bgCursorX / bgWidth;
var bgRatioY = bgCursorY / bgHeight;
if (deltaY < 0) {
bgWidth += bgWidth * settings.zoom;
bgHeight += bgHeight * settings.zoom;
} else {
bgWidth -= bgWidth * settings.zoom;
bgHeight -= bgHeight * settings.zoom;
}
// Take the percent offset and apply it to the new size:
bgPosX = offsetX - (bgWidth * bgRatioX);
bgPosY = offsetY - (bgHeight * bgRatioY);
// Prevent zooming out beyond the starting size
if (bgWidth <= width || bgHeight <= height) {
reset();
} else {
updateBgStyle();
}
}
function set(a, b, e) {
console.log("top=" + a + "left=" + b);
img1.style.top = b + "px"; //"-90px" ;
img1.style.left = a + "px"; //"120px";
}
function drag(e) {
e.preventDefault();
bgPosX += (e.pageX - previousEvent.pageX);
bgPosY += (e.pageY - previousEvent.pageY);
bgPosX += (e.pageX - previousEvent.pageX);
set(bgPosX, bgPosY, e);
previousEvent = e;
updateBgStyle();
}
function removeDrag() {
document.removeEventListener('mouseup', removeDrag);
document.removeEventListener('mousemove', drag);
}
// Make the background draggable
function draggable(e) {
e.preventDefault();
previousEvent = e;
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', removeDrag);
}
function load() {
if (img.src === cachedDataUrl)
return;
var computedStyle = window.getComputedStyle(img, null);
var computedStyle1 = window.getComputedStyle(img1, null);
width = parseInt(computedStyle.width, 10);
height = parseInt(computedStyle.height, 10);
width1 = parseInt(computedStyle1.top, 10);
height1 = parseInt(computedStyle1.top, 10);
bgWidth = width;
bgHeight = height;
bgPosX = 0;
bgPosY = 0;
setSrcToBackground(img);
img.style.backgroundSize = width + 'px ' + height + 'px';
img.style.backgroundPosition = '0 0';
img.addEventListener('wheelzoom.reset', reset);
img.addEventListener('wheel', onwheel);
img.addEventListener('mousedown', draggable);
img1.addEventListener('wheelzoom.reset', reset);
img1.addEventListener('wheel', onwheel);
img1.addEventListener('mousedown', draggable);
}
var destroy = function(originalProperties) {
img.removeEventListener('wheelzoom.destroy', destroy);
img.removeEventListener('wheelzoom.reset', reset);
img.removeEventListener('load', load);
img.removeEventListener('mouseup', removeDrag);
img.removeEventListener('mousemove', drag);
img.removeEventListener('mousedown', draggable);
img.removeEventListener('wheel', onwheel);
img1.removeEventListener('wheelzoom.destroy', destroy);
img1.removeEventListener('wheelzoom.reset', reset);
img1.removeEventListener('load', load);
img1.removeEventListener('mouseup', removeDrag);
img1.removeEventListener('mousemove', drag);
img1.removeEventListener('mousedown', draggable);
img1.removeEventListener('wheel', onwheel);
img.style.backgroundImage = originalProperties.backgroundImage;
img.style.backgroundRepeat = originalProperties.backgroundRepeat;
//img.src = originalProperties.src;
}.bind(null, {
backgroundImage: img.style.backgroundImage,
backgroundRepeat: img.style.backgroundRepeat
//src: img.src
});
img.addEventListener('wheelzoom.destroy', destroy);
options = options || {};
Object.keys(defaults).forEach(function(key) {
settings[key] = options[key] !== undefined ? options[key] : defaults[key];
});
if (img.complete) {
load();
}
img.addEventListener('load', load);
};
// Do nothing in IE8
if (typeof window.getComputedStyle !== 'function') {
return function(elements) {
return elements;
};
} else {
return function(elements, options) {
if (elements && elements.length) {
Array.prototype.forEach.call(elements, main, options);
} else if (elements && elements.nodeName) {
main(elements, options);
}
return elements;
};
}
}());
wheelzoom(document.querySelector('div.zoom', "id"));<body>
<div class='zoom' style="width: 760px;height:520px;border: 1px solid red;overflow:hidden;" id="target">
<img class='zoom1' id="img" src='http://blogs-images.forbes.com/trevornace/files/2016/02/political-map-world-1200x813.jpg' alt='Daisy!' width='755px' height='520px' />
<div style="position: relative;border: 1px solid red; width: 200px; height: 100px;top:-190px;">
<img src='camera.png' alt='Daisy!' width='55px' height='20px' />
</div>
</div>
</body>
答案 0 :(得分：0)
不要使用宽度和高度。你可以使用带有col-md -... class.use divs的bootstrap与这种类。它有助于响应。