Fatal编程技术网
  • javascript/
  • Javascript 元素围绕DIV的中心旋转-只有最后添加到页面的元素响应onClick事件

Javascript 元素围绕DIV的中心旋转-只有最后添加到页面的元素响应onClick事件

javascript css

Javascript 元素围绕DIV的中心旋转-只有最后添加到页面的元素响应onClick事件,javascript,css,Javascript,Css,我在一个主分区内有六个分区。它们按预期围绕其中心旋转 它们都应该有不同的图像，并在单击时显示一些相关的文本 单击时，所有元素都会响应Z索引最高的旋转div的onClick事件。如果更多的具有相等的Z索引，则添加最后一个 从我使用FireBug收集的数据来看，每个旋转div都包含在一个更大的正方形内，该正方形随它旋转，从而创建一个覆盖所有其他div的层 有办法解决这个问题吗 这是html文件： <!DOCTYPE html> <html> <head>

我在一个主分区内有六个分区。它们按预期围绕其中心旋转

它们都应该有不同的图像，并在单击时显示一些相关的文本

单击时，所有元素都会响应Z索引最高的旋转div的onClick事件。如果更多的具有相等的Z索引，则添加最后一个

从我使用FireBug收集的数据来看，每个旋转div都包含在一个更大的正方形内，该正方形随它旋转，从而创建一个覆盖所有其他div的层

有办法解决这个问题吗

这是html文件：

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" type="text/css" href="./css/desktop.css">
        <meta charset="UTF-8">
        <title>Rotating images</title>
    </head>
    <body>
        <div class="container-round">

            <div class="div0" id = "0" style = "z-index : 15" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
            <div class="div1" id = "1" style = "z-index : 15" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div> 
            <div class="div2" id = "2" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
            <div class="div3" id = "3" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>              
            <div class="div4" id = "4" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
            <div class="div5" id = "5" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>      

        </div>
    </body>
</html>
工作示例如下：

非常感谢大家

从您的
css
，每个div 1到5都使用相同的图像：
背景：url（../images/img1.jpg）
。这就解释了为什么所有div都显示相同的图像

对于点击：你看到相同东西的原因是你所有的div1-5都占据了100%的宽度和高度。您只是偏移了图像本身显示的位置。所以，当你点击任何地方时，你实际上是在点击最上面的元素。要解决这个问题，您可能需要将图像从
宽度：100%
，
高度：100%
中移开，而将图像单独放置。也就是说，将div设置为图像大小，然后应用适当的变换将其设置到所需的位置。
也可以添加一个
边框：1px纯红色从
css
，每个div 1到5都使用相同的图像：
背景：url（../images/img1.jpg）
。这就解释了为什么所有div都显示相同的图像

对于点击：你看到相同东西的原因是你所有的div1-5都占据了100%的宽度和高度。您只是偏移了图像本身显示的位置。所以，当你点击任何地方时，你实际上是在点击最上面的元素。要解决这个问题，您可能需要将图像从
宽度：100%
，
高度：100%
中移开，而将图像单独放置。也就是说，将div设置为图像大小，然后应用适当的变换将其设置到所需的位置。
也可以添加一个
边框：1px纯红色。
这可能会有所帮助-

CSS和HTML



.container{
宽度：700px；
高度：700px；
边界半径：50%；
背景色：黑色；
位置：相对位置；
动画：轨道0 10s线性无限；
}
.img{
背景：白色；
位置：绝对位置；
宽度：27.78%；
身高：16.67%；
}
.首先{
最高：8.33%；
左：36.11%；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
变换：旋转（0度）；
}
.第二{
最高：25%；
左：65.27%；
变换：旋转（60度）；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.第三{
底部：25%；
左：65.27%；
变换：旋转（120度）；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.福斯{
底部：8.33%；
左：36.11%；
变换：旋转（180度）；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.第五{
变换：旋转（240度）；
底部：25%；
右：65.27%；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.第六{
最高：25%；
变换：旋转（300度）；
右：65.27%；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
@关键帧轨道0{
从{变换：旋转（0度）；}到{变换：旋转（360度）；}
}




这可能会有所帮助-

CSS和HTML



.container{
宽度：700px；
高度：700px；
边界半径：50%；
背景色：黑色；
位置：相对位置；
动画：轨道0 10s线性无限；
}
.img{
背景：白色；
位置：绝对位置；
宽度：27.78%；
身高：16.67%；
}
.首先{
最高：8.33%；
左：36.11%；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
变换：旋转（0度）；
}
.第二{
最高：25%；
左：65.27%；
变换：旋转（60度）；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.第三{
底部：25%；
左：65.27%；
变换：旋转（120度）；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.福斯{
底部：8.33%；
左：36.11%；
变换：旋转（180度）；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.第五{
变换：旋转（240度）；
底部：25%；
右：65.27%；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
.第六{
最高：25%；
变换：旋转（300度）；
右：65.27%；
背景图片：url(http://68.169.58.245/darryl/images/img1.jpg);
}
@关键帧轨道0{
从{变换：旋转（0度）；}到{变换：旋转（360度）；}
}




是的，这不是问题，应该是相同的图像。客户稍后会提供它们，我使用的是随机的。我无法理解的是，为什么当我点击任何图像时，它总是出现在警报中的相同ID是的，这不是问题，预期会出现相同的图像。客户稍后会提供它们，我使用的是随机的。我不明白的是，为什么当我点击任何一张图片时，它总是出现在警报中的同一个ID OK，我会这样做，我甚至没有想到这可能是一个问题，但我会尝试一下：-）@adilpaya，我用其中一个元素尝试过，并相应地编辑了上面的代码。现在div没有显示背景图像，只是在包含div（）的右上角自转。如果我和我们在一起

div {
    float : left;
}

.container-round {
    width: 700px;
    height: 700px;
    float: left;
    position: relative;
    overflow: hidden;
    background: #000;
    border-radius: 350px;
}

.div0 {
    position: absolute;
width: 18%;
height: 25%;
    background: url(../images/img0.jpg) no-repeat 500px center;
    animation: orbit0 10s linear infinite;
}

.div1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/img1.jpg) no-repeat 500px center;
    animation: orbit1 10s linear infinite;
}

.div2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/img2.jpg) no-repeat 500px center;
    animation: orbit2 10s linear infinite;
}

.div3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/img3.jpg) no-repeat 500px center;
    animation: orbit3 10s linear infinite;
}

.div4 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/img4.jpg) no-repeat 500px center;
    animation: orbit4 10s linear infinite;
}

.div5 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/img5.jpg) no-repeat 500px center;
    animation: orbit5 10s linear infinite;
}

@keyframes orbit0 { 
from { transform:rotate(0deg); } to { transform: rotate(360deg); }
}

@keyframes orbit1 { 
    from { transform:rotate(60deg); } to { transform: rotate(420deg); }
}

@keyframes orbit2 { 
    from { transform:rotate(120deg); } to { transform: rotate(480deg); }
}

@keyframes orbit3 { 
    from { transform:rotate(180deg); } to { transform: rotate(540deg); }
}

@keyframes orbit4 { 
    from { transform:rotate(240deg); } to { transform: rotate(600deg); }
}

@keyframes orbit5 { 
    from { transform:rotate(300deg); } to { transform: rotate(660deg); }
}