Verschieben eines Elements Mitte des Fensters auf Klick davon

Was ich in HTML haben 1 Hauptfeld und 1 Innenkasten mit absoluter Position. Innerer Kasten hat mehr kleine Kästen. Was ich versuche zu erreichen ist, wenn ich auf eine Box klicke, ganze innere Box verschiebe und die Box in der Mitte des Fensters platziere.

Zum Beispiel schauen Sie sich das Bild an, das ich beigefügt habe. Das erste Bild ist normal. 2. Bild ist, nach dem Klicken auf die erste Box, wird die innere Box bewegt und die erste Box in der Mitte des Bildschirms gemacht. Wenn ich auf die zweite Box klicke, sollte die weiße Box an eine Position verschoben werden, so dass die zweite Box in der Mitte erscheint. Das gleiche gilt für die 3. Box, 4. Box und so weiter.

Ich bin mir nicht sicher, wie es geht. aber ich habe das Schnipsel könnte Ihnen helfen, mir zu sagen, was zu tun ist.

$('.box').click(function(){ 
 
    var top = $(this).position().top; 
 
    var left = $(this).position().left; 
 
    $('#inner-box').css({ 
 
    'margin-left' : left, 
 
    'margin-top' : top 
 
    }); 
 
});

.main-box{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background-color:gray; 
 
    overflow:hidden; 
 
} 
 

 
    .inner-box{ 
 
    position:absolute; 
 
    top: 15px; 
 
    left:15px; 
 
    width:calc(100% - 30px); 
 
    height: calc(100% - 30px); 
 
    background-color: white; 
 
    font-size:0; 
 
    } 
 

 
    .box{ 
 
    display:inline-block; 
 
    border:1px solid red; 
 
    background-color: black; 
 
    height: 20%; 
 
    width: 22%; 
 
    margin:1.1%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-box" id="main-box"> 
 
    <div class="inner-box" id="inner-box"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Quelle

2016-12-01 Xahed Kamal

ich die Lösung berechnen. Wenn jemand für gleiche Lösung suchen, hier mein Code- ist

$(document).on('click', '.box', function(){ 
    var centerX = $('#main-box').height()/2; 
    var centerY = $('#main-box').width()/2; 

    var pos_top = $(this).position().top; 
    var pos_left = $(this).position().left; 

    var box_width = $(this).width()/2; 
    var box_height = $(this).height()/2; 

    var top = (-1) * (pos_top - centerX + box_height); 
    var left = (-1) * (pos_left - centerY + box_width); 


    $('#inner-box').css({ 
     'margin-left' : left, 
     'margin-top' : top 
    }) 
});

Quelle

2016-12-01 21:00:04

Sie könnten CSS trastion mit calc verwenden, um die Dokumente with und height durch 2 geteilt bekommen die Box auf der Mitte des Bildschirms zu bewegen. Schalten Sie einfach eine Klasse auf das Element #inner-box.

Hier ist eine Möglichkeit, es zu tun.

$('.box').click(function() { 
 
    $('#inner-box').toggleClass('center'); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
.main-box{ 
 
    position:relative; 
 
    height: 100vh; 
 
    background-color:gray; 
 
    overflow:hidden; 
 
} 
 

 
.inner-box{ 
 
    position:absolute; 
 
    top: 15px; 
 
    left:15px; 
 
    width:calc(100% - 30px); 
 
    height: calc(100% - 30px); 
 
    background-color: white; 
 
    font-size:0; 
 
    -webkit-transition: top 0.3s linear, left 0.3s linear; 
 
    -moz-transition: top 0.3s linear, left 0.3s linear; 
 
    -ms-transition: top 0.3s linear, left 0.3s linear; 
 
    -o-transition: top 0.3s linear, left 0.3s linear; 
 
    transition: top 0.3s linear, left 0.3s linear; 
 
} 
 

 
#inner-box.center { 
 
    top: calc(100vh/2); 
 
    left: calc(100vw/2); 
 
} 
 

 
.box{ 
 
    display:inline-block; 
 
    border:1px solid red; 
 
    background-color: black; 
 
    height: 20%; 
 
    width: 22%; 
 
    margin:1.1%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-box" id="main-box"> 
 
    <div class="inner-box" id="inner-box"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Quelle

2016-12-01 20:21:06 DavidDomain

Ich weiß das. Das wollte ich nicht. Tut mir leid, meine Erklärung war verwirrend. Bearbeitete die Frage. –

Toggle einer neuen Klasse in jquery mit top:50%; left:50%; und der Grenzwert durch die relative Box Position Mutter gefunden

var pat=$('#inner-box').offset().top,pal=$('#inner-box').offset().left; 
 
$('.box').click(function() { 
 
    var top = pat+$(this).position().top+$(this).height()/2; 
 
    var left = pal+$(this).position().left+$(this).width()/2; 
 
    //alert(top +","+left); 
 
    $('#inner-box').css({ 
 
     'margin-left' : -1*left, 
 
     'margin-top' : -1*top 
 
    }); 
 
    if(!$('#inner-box').hasClass('newposit')) 
 
    $('#inner-box').addClass('newposit'); 
 
});

.main-box{ 
 
position:absolute; 
 
top:0; 
 
left:0; 
 
right:0; 
 
bottom:0; 
 
background-color:gray; 
 
overflow:hidden; 
 
    } 
 

 
    .inner-box{ 
 
position:absolute; 
 
top: 15px; 
 
left:15px; 
 
width:calc(100% - 30px); 
 
height: calc(100% - 30px); 
 
background-color: white; 
 
font-size:0; 
 
    -webkit-transition: all 0.5s linear; 
 
    -moz-transition: all 0.5s linear; 
 
    -ms-transition: all 0.5s linear; 
 
    -o-transition: all 0.5s linear; 
 
    transition: all 0.5s linear; 
 
    } 
 

 
    .box{ 
 
display:inline-block; 
 
border:1px solid red; 
 
background-color: black; 
 
height: 20%; 
 
width: 22%; 
 
margin:1.1%; 
 
    } 
 
    .newposit { 
 
top: calc(50%); 
 
left: calc(50%); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-box" id="main-box"> 
 
    <div class="inner-box" id="inner-box"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Quelle

2016-12-01 20:45:05 jafarbtech

lesen Sie die Frage erneut. –

ja, ich habe die Antwort entsprechend aktualisiert – jafarbtech

Sie müssen den Index angeklickt kleine Box finden:

var indexOfClickedBox; 
$('.box').click(function(){ 
    indexOfClickedBox = $('.box').index(this); 
});

Von diesem Index die Position der kleinen Box in ihrer Mutter finden . und Sie können Werte berechnen, um dieses Feld in die Mitte zu setzen.

Quelle

2016-12-01 21:10:16

Verschieben eines Elements Mitte des Fensters auf Klick davon

Antwort

Verwandte Themen