Javascript 放大div并使缩放和定位与子div匹配的简单方法？

是否有一种简单的方法可以放大父

div

并将单击的子

div

定位到屏幕中央

初始状态：

用户单击其中一个小圆圈后：

html:

脚本：

<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>

函数scaleAndPositionContainer（）{
控制台日志（“单击”）；
$（'.container'）.css({
“-webkit转换”：“缩放（10）”，
“-moz变换”：“比例（10）”，
“-ms变换”：“比例（10）”，
“-o变换”：“比例（10）”，
“变换”：“比例（10）”
});
//移位位置
}
}

这应该会给你一些工作。对于居中，我想知道当点击角上的一个圆时会发生什么，因为没有足够的空间让它居中。我还制作了它，如果在圆圈外单击，它会缩小

函数缩放（e）{
e、 停止传播（）；
$（'.container'）.css（'transform'，'scale（5）'）；
$（'.container'）.css（'transform-origin'，e.clientX+“px”+e.clientY+“px”）；
}
函数缩放向下（e）{
$（'.container'）.css（'transform'，'scale（1）'）；
}

html，主体，.container{
身高：100%；
宽度：100%；
保证金：0；
}
.集装箱{
背景色：黑色；
变换：比例（1）；
过渡：0.5s线性变换；
}
.圆圈1{
宽度：50px；
高度：50px；
位置：绝对位置；
左：5%；
底部：10%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈2{
宽度：40px；
高度：40px；
位置：绝对位置；
左：10%；
排名前10%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈3{
宽度：50px；
高度：50px；
位置：绝对位置；
左：50%；
最高：50%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈4{
宽度：30px；
高度：30px；
位置：绝对位置；
左：25%；
最高：60%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈5{
宽度：70px；
高度：70像素；
位置：绝对位置；
左：40%；
最高：40%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈6{
宽度：55px；
高度：55px；
位置：绝对位置；
左：80%；
最高：30%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈7{
宽度：50px；
高度：50px；
位置：绝对位置；
右：40%；
最高：20%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈8{
宽度：30px；
高度：30px；
位置：绝对位置；
左：70%；
最高：70%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈9{
宽度：70px；
高度：70像素；
位置：绝对位置；
左：40%；
底部：20%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}
.圆圈10{
宽度：50px；
高度：50px；
位置：绝对位置；
右：20%；
最高：20%；
边界半径：50%；
背景色：#ffffff；
-webkit过滤器：模糊（2px）；
}

请发布您目前掌握的代码。欢迎访问so。我们的格式要求你做出努力，然后发布一个更具体的问题。我会将内容和圆圈分开，每个圆圈都有一个属性，知道它与哪个内容分区相关。当您单击一个圆时，您可以缩放它并使用“上”、“左”、“宽”和“高”将其移动到中心，然后淡入相应的内容。我担心使用scale（10）不会带来好的结果。因此，我可以根据单击来缩放并将每个圆移动到中心，但是如何让其他圆与单击的圆一起缩放和移动呢？是否有某种相对位置/比例我需要为每一个进行编程？我可能也没有正确解释。其结果类似于在iOS主屏幕上导航，您单击一个文件夹，它实际上会放大到您单击的文件夹。此结果帮助我解决了其他问题。非常感谢。

.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>