扩展div的简单方法，并且具有与儿童div相匹配的比例和定位？

Question

是否有一种简单的方法可以扩展父div并将点击其中的子div定位到屏幕中心？

初始状态：

用户点击其中一个小圈后：

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>

CSS：

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

Answer 1

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

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>