相关疑难解决方法(0)

我有两个div不同的透明彩色背景.元素彼此重叠.

我想自定义重叠区域的颜色.

例如,我将红色和蓝色混合,不透明度为0.5,并希望重叠区域为黑色.可能吗？该解决方案将简化功能的实现.

为了更好地理解,例如:

.wrapper{
  width: 200px;
  height: 500px;
  background-color: #fff;
  position: relative;
}
.box{
  width: 100%;
  position: absolute;
}
.box-1{
  top: 0px;
  height: 250px;
  background-color: rgba(181, 226, 163, 0.5);  
}
.box-2{
  background-color: rgba(183, 222, 241, 0.5);
  top: 200px;
  height: 300px;
}

<div class="wrapper">
  <div class="box box-1">
  </div>
  <div class="box box-2">
  </div>
</div>

更新:

重叠区域的高度未知,因此无法在高度上严格添加元素50px.问题是关于 自定义混合颜色.

我正在使用CSS动画和jQuery在十字路口(顶视图)中移动汽车来模拟驾驶执照测验.用户必须通过点击汽车来选择交叉订单.

示例图片:

每辆车都有属性和这样的动画,例如:蓝色车转右(与图像不同):

#auto-b {
    left: 320px;
    top: 150px;
    -webkit-transform: rotate(180deg);
}

.animated #auto-b {
    -webkit-animation-name: move-b;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes move-b {

    30% {
        left: 260px;
        top: 150px;
        -webkit-transform: rotate(180deg);
    }
    60% {
        left: 214px;
        top: 120px;
        -webkit-transform: rotate(270deg);
    }

    100% {
        top: 30px;
        left: 214px;
        -webkit-transform: rotate(270deg);
    }
}

我不知道的是我如何检测两辆车是否因为它们旋转(转动)而发生碰撞.

播放按钮功能:

$('#play').on('click', play);

function play(){    
    $('.auto').removeClass('selected');
    $('#incrocio').addClass('animated');    
    interval = setInterval(crash,1);
}

碰撞功能(仅适用于红色和绿色汽车碰撞,因为它们不会旋转):

function crash(){

    var autoA = $('#auto-a').position();    
    var autoB = $('#auto-b').position();
    var autoC = $('#auto-c').position();    
    var top1 …

我在jsfiddle中有这个例子

我有一个var作为碰撞元素:

var $div = $('.container');

然后碰撞:

function test (){
    $('.drag')
        .drag("start",function( ev, dd ){
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight()
                - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth()
                - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });   
        });
}

对于:

<div class="container"></div>
<div class="drag xxx" style="left:40px;"></div>
<div class="drag xxx" style="left:120px;"></div>
<div class="drag xxx" style="left:200px;"></div> …

可能重复:
如何检测两个div是否与jquery接触？

我花了很多时间试图弄清楚如何检测两个div是否重叠.
我尝试了gamequery插件并像这样使用它:

$("#" + checkform).collision("#" + checkform + "w").each(function(){
    alert("Collision");
});

你会使用gamequery插件和/或你会怎么做？

当拖动事件停止时,我必须找到我的div是否与任何其他节点发生冲突.因此,在"停止"事件中,我编写了一个循环,用于检查与相同类型的项目的冲突.

$('.article').draggable({

    stop: function(event, ui){

        $(".article").each(function (i) {

            if(this == ui.helper){
                return;
            }

            // Test collisions
        });         
    }
});

现在,我找不到从循环中排除自己的方法.我期望这和ui.helper是一样的,但它们被认为是独立的元素.我该怎么做？

谢谢,