[英]Keep selected div centered when zooming
I have this HTML code: 我有这个HTML代码:
<div class="inner">
<div class="nhood">
<div class="image"></div>
</div>
</div>
And this CSS: 而这个CSS:
.image {
width: 4000px;
height: 4000px;
background: beige;
margin: 150px;
position: absolute;
}
.nhood {
overflow: hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
position: relative;
background: black;
}
The .image div is filled with 400 divs, all floating left, creating a huge 'chess'-pattern, the code is the following: .image div填充了400个div,所有div都向左浮动,创建了一个巨大的“棋”图案,代码如下:
.image > div {
border: 1px dotted;
width: 5%;
height: 5%;
float: left;
box-sizing:border-box;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
user-select: none;
}
You are able to click on any cell to show its info, and the whole .image div is draggable. 您可以单击任何单元格以显示其信息,并且整个.image div是可拖动的。 Now if you have selected a cell and you ZOOM (which basically only shrinks/extends the 4000x4000 div to 2000x2000 or the other way round) it zooms in ANYWHERE but I want to keep focus on the cell that was selected earlier.
现在,如果您选择了一个单元格,并且您将ZOOM(基本上仅将4000x4000 div缩小/扩展到2000x2000或反之),它会在任何地方放大,但我想继续关注之前选择的单元格。
I have made an image of this: http://smimoo.lima-city.de/zoom.png 我对此做了一个图像: http : //smimoo.lima-city.de/zoom.png
I hope this was any clear... 我希望这很清楚...
EDIT: 编辑:
JS JS
function zoomIn() {
$(draggable).animate({
height: '4000',
width: '4000',
borderWidth: 0
}, 600, function() {
$divs.animate({
borderWidth: 0
});
});
}
function zoomOut() {
$(draggable).animate({
height: '2000',
width: '2000',
borderWidth: 0
}, 600, function() {
$divs.animate({
borderWidth: 1
});
});
EDIT2: EDIT2:
This is my js to center the function (written before Mario helped me out): 这是我的使函数居中的js(在Mario帮助我之前编写):
function centerField() {
var myObject = $(draggable).find('.selected');
var docWidth = ($(viewport).width() / 2) - (myObject.outerWidth()/2);
var docHeight = ($(viewport).height() / 2) - (myObject.outerWidth()/4);
var myOff = myObject.offset();
var distanceTop = myOff.top - docHeight;
var distanceLeft = myOff.left - docWidth;
var position = $(draggable).position();
var left = position.left;
var top = position.top;
var right = left - $(viewport).width() + draggable.outerWidth(true);
var bottom = top - $(viewport).height() + draggable.outerHeight(true);
if(left - distanceLeft > 0) {
distanceLeft = left;
}
if(right - distanceLeft < 0) {
distanceLeft = right;
}
if(top - distanceTop > 0) {
distanceTop = top;
}
if(bottom - distanceTop < 0) {
distanceTop = bottom;
}
$(draggable).animate({
left: '-=' + distanceLeft,
top: '-=' + distanceTop
}, { duration: 200, queue: false });
}
Assume that the selected div has the class .selected
, this function will center the div: 假设选定的div具有
.selected
类,则此函数将div居中:
function centerSelected() {
var selectedElement = $('.image .selected');
var p = selectedElement.position();
var w = $('.nhood').width();
var h = $('.nhood').height();
var offsetX = (w/2)-p.left - (selectedElement.width() / 2);
var offsetY = (h/2)-p.top - (selectedElement.height() / 2);
if(offsetX > 0) offsetX = 0;
if(offsetY > 0) offsetY = 0;
$('.image').css('left', offsetX + 'px');
$('.image').css('top', offsetY + 'px');
}
Just call centerSelected
after every zoom operation. 只需致电
centerSelected
在每次缩放操作后选择。
Here is a jsfiddle with slightly modified css to get the presentation work: http://jsfiddle.net/q1r95w3g/3/ 这是一个经过略微修改的jsf的jsfiddle,可以完成演示工作: http : //jsfiddle.net/q1r95w3g/3/
Edit If you want the div to get centered during jQuery animation, you can call centerSelected
in the step
callback of the animate
method, eg: 编辑如果希望div在jQuery动画期间居中,则可以在
animate
方法的step
回调中调用centerSelected
,例如:
function zoomIn() {
$(draggable).animate({
height: '4000',
width: '4000',
borderWidth: 0
},{
duration: 600,
complete: function() {
$divs.animate({
borderWidth: 0
});
},
step: function(now, fx) {
centerSelected();
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.