<分区>
javascript - 单击圆 Angular div 的 Angular
考虑下图:
通过以下代码在 Chrome 中呈现:
HTML:
<div class="floor">
<div class="large ball zindex2" onclick="touch(this)">
<div>
/////////////////////////////////<br/>
/////////////////////////////////
</div>
</div>
<div class="small ball zindex1" onclick="touch(this)"></div>
</div>
<div id="log"></div>
Javascript:
function log(str) {
document.getElementById('log').innerHTML += '<br/>' + str;
}
function touch(ball) {
log(ball.className + ' clicked')
}
CSS:
.floor { background-color: #ddd; width:200px; height: 200px; }
.floor .ball { border-radius: 50%; overflow: hidden; color: #ff0; }
.ball.small { height:25px; width: 25px; background-color: #00f; }
.ball.large { height:150px; width: 150px; background-color: #555; }
.zindex1 { position:absolute; z-index:1; }
.zindex2 { position:absolute; z-index: 2; }
在蓝色小球上点击两次后，它的位置绝对低于灰色球。
假设当前图层定位，如何在点击大球或小球的任意位置时得到相应的消息。
最佳答案
答案很简单，将两个球旋转 45 度
.floor .ball {
border-radius: 50%;
overflow: hidden;
color: #ff0;
transform: rotate(45deg); /* ADD THIS LINE TO YOUR JS FIDDLE AND RUN */
}
关于javascript - 单击圆 Angular div 的 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43616853/