Простой способ масштабирования div и иметь масштаб и позиционирование в соответствии с дочерним div?

Есть ли простой способ увеличить родительский div и разместить ребенка div, щелкнув внутри его в центр экрана?Простой способ масштабирования div и иметь масштаб и позиционирование в соответствии с дочерним div?

Исходное состояние:

enter image description here

После того, как пользователь нажимает одну из маленьких кругов:

enter image description here

HTML:

<div class="container"> 

<div class="circle1" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle2" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle3" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle4" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle5" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle6" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle7" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle8" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle9" onClick="scaleAndPositionContainer()"> 
</div> 

<div class="circle10" onClick="scaleAndPositionContainer()"> 
</div> 

</div>

УС:

.container { 


transform: scale(1); 

-moz-transition: all .25s cubic-bezier(0, 1.8, 1, 1.8); 
-webkit-transition: all .25s cubic-bezier(0, 1.8, 1, 1.8); 
-o-transition: all .25s cubic-bezier(0, 1.8, 1, 1.8); 
-ms-transition: all .25s cubic-bezier(0, 1.8, 1, 1.8); 
transition: all .25s cubic-bezier(0, 1.8, 1, 1.8); 

} 

.circle1 { 
width:50px; 
height:50px; 
position:absolute; 
left:5%; 
bottom:10%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle2 { 

width:40px; 
height:40px; 
position:absolute; 
left:10%; 
top:10%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle3 { 

width:50px; 
height:50px; 
position:absolute; 
left:50%; 
top:50%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle4 { 

width:30px; 
height:30px; 
position:absolute; 
left:25%; 
top:60%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle5 { 

width:70px; 
height:70px; 
position:absolute; 
left:40%; 
top:40%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle6 { 

width:55px; 
height:55px; 
position:absolute; 
left:80%; 
top:30%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle7 { 

width:50px; 
height:50px; 
position:absolute; 
right:40%; 
top:20%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle8 { 

width:30px; 
height:30px; 
position:absolute; 
left:70%; 
top:70%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle9 { 

width:70px; 
height:70px; 
position:absolute; 
left:40%; 
bottom:20%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

} 

.circle10 { 

width:50px; 
height:50px; 
position:absolute; 
right:20%; 
top:20%; 
border-radius:50%; 
background-color:#ffffff; 
-webkit-filter: blur(2px); 

}

Сценарий:

<script> 

function scaleAndPositionContainer(){ 

console.log("clicked"); 

$('.container').css({ 
     '-webkit-transform' : 'scale(10)', 
     '-moz-transform' : 'scale(10)', 
     '-ms-transform'  : 'scale(10)', 
     '-o-transform'  : 'scale(10)', 
     'transform'   : 'scale(10)' 
}); 

//Shift Position 

} 

} 

</script>

источник

2014-12-11 effex

Пожалуйста, пост код, который вы имеете до сих пор. –

Добро пожаловать в SO. Наш формат требует, чтобы вы приложили усилия, а затем опубликовали более конкретный вопрос. – isherwood

Я бы выделил содержимое и круги, у каждого круга есть атрибут, чтобы узнать, с каким содержимым он связан. Когда вы нажимаете на круг, вы масштабируете его и перемещаете в центр, используя верхнюю, левую, ширину и высоту, а затем вы исчезаете в соответствующем контенте. Я боюсь, что использование scale (10) не приведет к хорошим результатам. –

Это должно дать вам что-то работать. Для центрирования я хотел бы знать, что должно произойти, когда щелкнут круг в углу, так как не будет достаточного пространства для его центрирования. Я также сделал это так, чтобы он увеличивал масштаб, если щелкнуть за пределами кругов.

function scaleUp(e) { 
 
    e.stopPropagation(); 
 

 
    $('.container').css('transform', 'scale(5)'); 
 

 
    $('.container').css('transform-origin', e.clientX + "px " + e.clientY + "px"); 
 

 
} 
 

 
function scaleDown(e) { 
 
    $('.container').css('transform', 'scale(1)'); 
 
}

html, body, .container { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    background-color: black; 
 
    transform: scale(1); 
 
    transition: transform 0.5s linear; 
 
} 
 

 
.circle1 { 
 
    width:50px; 
 
    height:50px; 
 
    position:absolute; 
 
    left:5%; 
 
    bottom:10%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 
} 
 

 
.circle2 { 
 
    width:40px; 
 
    height:40px; 
 
    position:absolute; 
 
    left:10%; 
 
    top:10%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 
} 
 

 
.circle3 { 
 

 
    width:50px; 
 
    height:50px; 
 
    position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
} 
 

 
.circle4 { 
 

 
    width:30px; 
 
    height:30px; 
 
    position:absolute; 
 
    left:25%; 
 
    top:60%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
} 
 

 
.circle5 { 
 

 
    width:70px; 
 
    height:70px; 
 
    position:absolute; 
 
    left:40%; 
 
    top:40%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
} 
 

 
.circle6 { 
 

 
    width:55px; 
 
    height:55px; 
 
    position:absolute; 
 
    left:80%; 
 
    top:30%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
} 
 

 
.circle7 { 
 

 
    width:50px; 
 
    height:50px; 
 
    position:absolute; 
 
    right:40%; 
 
    top:20%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
} 
 

 
.circle8 { 
 

 
    width:30px; 
 
    height:30px; 
 
    position:absolute; 
 
    left:70%; 
 
    top:70%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
} 
 

 
.circle9 { 
 

 
    width:70px; 
 
    height:70px; 
 
    position:absolute; 
 
    left:40%; 
 
    bottom:20%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
} 
 

 
.circle10 { 
 

 
    width:50px; 
 
    height:50px; 
 
    position:absolute; 
 
    right:20%; 
 
    top:20%; 
 
    border-radius:50%; 
 
    background-color:#ffffff; 
 
    -webkit-filter: blur(2px); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container" onclick="scaleDown(event)"> 
 
     <div class="circle1" onClick="scaleUp(event)"></div> 
 
     <div class="circle2" onClick="scaleUp(event)"></div> 
 
     <div class="circle3" onClick="scaleUp(event)"></div> 
 
     <div class="circle4" onClick="scaleUp(event)"></div> 
 
     <div class="circle5" onClick="scaleUp(event)"></div> 
 
     <div class="circle6" onClick="scaleUp(event)"></div> 
 
     <div class="circle7" onClick="scaleUp(event)"></div> 
 
     <div class="circle8" onClick="scaleUp(event)"></div> 
 
     <div class="circle9" onClick="scaleUp(event)"></div> 
 
     <div class="circle10" onClick="scaleUp(event)"></div> 
 
    </div> 
 
</body>

источник

2014-12-11 17:07:34 user2570380

Этот результат помог мне с другой проблемой. спасибо –

Простой способ масштабирования div и иметь масштаб и позиционирование в соответствии с дочерним div?

ответ

Смежные вопросы