Javascript div中的转换_Javascript_Jquery_Html_Css

Javascript div中的转换

javascript jquery html css

Javascript div中的转换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有三个不同的盒子在同一排。我希望在框内单击时在这些框中进行转换。现在，当我点击任何一个盒子时，它会从左到右展开，得到全宽，其他的盒子会堆积在下一行。我想要的是，当我单击红色框时，该框必须从左向右展开，与其余框重叠。类似地，当我单击绿色框时，它必须从两侧展开，并在左右两侧重叠两个框，并获得全宽。类似地，当我单击蓝色框时，它必须从左侧展开，并填充与其余框重叠的宽度。谁能帮帮我吗我的代码是： <html> <head> <title>Transit

我有三个不同的盒子在同一排。我希望在框内单击时在这些框中进行转换。现在，当我点击任何一个盒子时，它会从左到右展开，得到全宽，其他的盒子会堆积在下一行。我想要的是，当我单击红色框时，该框必须从左向右展开，与其余框重叠。类似地，当我单击绿色框时，它必须从两侧展开，并在左右两侧重叠两个框，并获得全宽。类似地，当我单击蓝色框时，它必须从左侧展开，并填充与其余框重叠的宽度。谁能帮帮我吗

我的代码是：

<html>
<head>
    <title>Transition</title>
    <style type="text/css">
    .box {
        width:30%;
        height: 200px;
        margin: 10px;
        float:left;
    }
    #first {
        background-color: red;
    }
    #second {
        background-color: green;
    }
    #third {
        background-color: blue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div id="first" class="box"></div>
        <div id="second" class="box"></div>
        <div id="third" class="box"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var containerWidth = $(".container").width();
            $(".box").click(function() {
                var id = $(this).attr("id");
                $("#"+id).animate({width: "100%"});
            });
        });
    </script>
</body>
</html>


过渡
.盒子{
宽度：30%；
高度：200px；
利润率：10px；
浮动：左；
}
#首先{
背景色：红色；
}
#第二{
背景颜色：绿色；
}
#第三{
背景颜色：蓝色；
}
$（函数（）{
var containerWidth=$（“.container”）.width（）；
$（“.box”）。单击（函数（）{
var id=$（this.attr（“id”）；
$（“#”+id）。设置动画（{width:“100%”）；
});
});

转换

transform:scale（）

，这将允许元素在其他元素上扩展。您只需通过js将该属性的类分配给transition，就可以在纯CSS中完成。由于每个元素都有20%的宽度，所以转换

scaleX（5）

将是100%。并使用

变换原点

更改元素从哪个方向展开

var containerWidth=$（“.container”）.width（）；
$（“.box”）。单击（函数（）{
var id=$（this.attr（“id”）；
$（this.addClass（'scale'）；
});
.box{
宽度：20%；
高度：200px；
利润率：10px；
浮动：左；
转变：转变；
变换原点：0；
}
#首先{
背景色：红色；
}
#第二{
背景颜色：绿色；
变换原点：中心；
}
#第三{
背景颜色：蓝色；
变换原点：100%0；
}
.天平{
变换：scaleX（5）；
}

使用位置重叠这些框最终是否只有背景色/图像，或实际内容/文本？我认为如何实现这一点取决于它，如果它是内容，那么取决于您希望它在不同的框宽下的具体表现。在过渡期间。。。（从一开始就以最终尺寸进行布局，并显示最初的切割、拉伸或调整宽度，…）如果需要重叠，也可以使用宽度：0；单击其他框我有另一种情况。如果我有4个盒子而不是3个呢。变换原点
属性将发生什么变化