Javascript 我如何使我的div与六个不同的图片展开时，点击它向外？

我已经尝试了很多不同的jquery，但是几乎没有成功。我对这一点还很陌生，我会尽可能多地学习

这是小提琴。我怎样才能做到这一点

HTML

jQuery

$("#prototype").click(function() {
   $(this).attr('width', '400');
    $(this).attr('height', '300');
});

---

首先，为了让jQuery工作，您必须从小提琴上调用jQueryCDN

现在，如果您想要扩展容器，那么在css中添加一个类，然后在单击时将该类添加到容器中就可以了

#prototype.expanded {
  width: 400px;
  height: 300px;
}

$("#prototype").click(function() {
  $(this).addClass('expanded');
});

如果希望图像随容器展开，则此操作将不起作用。因为它们有特定的高度

您可以在此处看到工作小提琴：

---

首先，为了让jQuery工作，您必须从小提琴上调用jQuery CDN

现在，如果您想要扩展容器，那么在css中添加一个类，然后在单击时将该类添加到容器中就可以了

#prototype.expanded {
  width: 400px;
  height: 300px;
}

$("#prototype").click(function() {
  $(this).addClass('expanded');
});

如果希望图像随容器展开，则此操作将不起作用。因为它们有特定的高度

您可以在此处看到工作小提琴：

---

或者使用javascript，这将更改prototype div中所有图像的样式（您也可以使用它更改每个图像的类）

函数展开（）{
var imgs=prototype.getElementsByTagName（“img”）；
对于（变量i=0；i

或者使用javascript，这将更改prototype div中所有图像的样式（您也可以使用它更改每个图像的类）

函数展开（）{
var imgs=prototype.getElementsByTagName（“img”）；
对于（变量i=0；i

我建议将楔子裁剪到可见区域并定位。这比计算圆中的楔块偏移容易得多。这里有一个例子，请原谅长javascript，它主要用于制作楔子。看看定位它们的css和切换类的click函数。有了它，你可以随心所欲地定位

var to_rad=Math.PI/180；
var deg=360/6；
var rad=度*至_rad；
函数楔子（）{
var c=document.createElement（'canvas'）.getContext（'2d'）；
c、 canvas.width=c.canvas.height=100；
c、 beginPath（）；
c、 fillStyle=“黑色”，c.strokeStyle=“红色”，c.lineWidth=2；
c、 翻译（50,50）；
c、 旋转（-90*to_rad）-rad）；
c、 翻译（-50，-50）；
c、 moveTo（50,50）；
c、 弧（50，50，46，0，rad）；
c、 lineTo（50,50）；
c、 填充（）；
c、 笔划（）；
返回c.canvas；
}
函数形状（）{
var c=document.createElement（'canvas'）.getContext（'2d'）；
c、 canvas.width=c.canvas.height=100；
c、 beginPath（）；
c、 fillStyle=“黑色”，c.strokeStyle=“红色”，c.lineWidth=2；
功能行（a、b、x、y）{
c、 动议（a，b）；
c、 lineTo（x，y）；
}
功能衰退（度）{
var to_rad=Math.PI/180；
var x=数学地板（c.canvas.width/2）；
变量y=数学地板（c.canvas.height/2）；
c、 翻译（x，y）；
c、 旋转（度*至弧度）；
c、 平移（-x，-y）；
}
函数rline（度数、a、b、x、y）{
腐烂（度）；
线（a，b，x，y）；
}
c、 moveTo（100,50）；
c、 弧（50,50,48,0，至_rad*360）；
c、 填充（）；
行（50,0,50,100）；
c、 moveTo（75,50）；
c、 弧度（50、50、25、0、360*to_rad）；
rline（度数*2-90,50,50,98,50）；
rline（度数*2,50,50,98,50）；
rline（度数，75,50,98,50）；
rline（度数*2,75,50,98,50）；
c、 笔划（）；
返回c.canvas；
}
函数makeShapes（）{
var circ=shape（）；
var x=document.createElement（'canvas'）.getContext（'2d'）；
var y=document.createElement（'canvas'）.getContext（'2d'）；
x、 canvas.width=x.canvas.height=100；
y、 canvas.width=y.canvas.height=50；
var w=楔形（）；
变量掩码=[
[50, 50],
[0, 50],
[0, 25],
[0, 0],
[50, 0],
[50, 25]
];
可变项目=[
[0, 0],
[-50, 0],
[-50, -25],
[-50, -50],
[0, -50],
[0, -25]
];
对于（变量i=0；i
正文{
背景色：#22222；
}
.pro wrap{
宽度：100px；
高度：100px；
位置：相对位置；
左：0px；
顶部：0px；
保证金：0自动；
}
pro on先生{
背景色：透明！重要；
}
.pro on.pro wrap{
顶部：100px！重要；
背景色：#660066；
}
pro先生，
.pro*{
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
专业人士{
背景色：#333333；
宽度：100px；
高度：100px；
位置：相对位置；
裕度：100px自动0；
}
.pro img{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100px；
高度：100px；
填充：0px；
边际：0px；
不透明度：1；
}
.pro在img上：悬停{
外形：2倍纯白；
光标：指针；
}
.pro.m2{
左：50px；
}
.pro.m3{
左：50px；
顶部：25px；
}
.pro.m4{
左：50px；
顶部：50px；
}
.pro.m5{
左：0px；
顶部：50px；
}
.pro.m6{
左：0px；
顶部：25px；
}
pro on先生{
保证金：0自动；
宽度：300px；
高度：300px；
}
.m1上的.pro{
左：-100px；
顶部：
#prototype.expanded {
  width: 400px;
  height: 300px;
}

$("#prototype").click(function() {
  $(this).addClass('expanded');
});

<script type="text/javascript">
    function expand() {
        var imgs = prototype.getElementsByTagName("img");
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].style.width = "400px";
            imgs[i].style.height = "300px";
        }
    }
</script>

<div id="prototype" onclick="expand();">
    <img style="height: 100px; width: 100px; position: absolute;" src="http://i.imgur.com/MEbxzVL.png" alt="menu1">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/TMZ4hXu.png" alt="menu2">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/VeJ6BR2.png" alt="menu3">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/aIYy0qr.png" alt="menu4">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/QO0Z8TE.png" alt="menu5">

    <img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/uGopItw.png" alt="menu6">
</div>