$(function(){ //初始化设置 var zIndex = 1; $('.div1').css('zIndex', zIndex); zIndex += 1; $('.div2').css('zIndex', zIndex); zIndex += 1; $('.div3').css('zIndex', zIndex); zIndex += 1; //窗体点击事件 $('div').click(function(){ var arr = [], thisDOM = $(this); var baseStartY = thisDOM.offset().top, baseEndY = baseStartY + thisDOM.height(); var baseStartX = thisDOM.offset().left, baseEndX = baseStartX + thisDOM.width(); var baseCenterX = baseStartX + (thisDOM.width() / 2); var baseZIndex = parseInt(thisDOM.css('zIndex')); $('div:not(.' + thisDOM.attr('class') + ')').each(function(){ //整理好四角坐标 var thisStartY = $(this).offset().top, thisEndY = thisStartY + $(this).height(); var thisStartX = $(this).offset().left, thisEndX = thisStartX + $(this).width(); var thisCenterX = thisStartX + ($(this).width() / 2); var thisZIndex = parseInt($(this).css('zIndex')); //依次比较四角坐标 var flag = false; if(thisZIndex > baseZIndex){ if(thisStartX >= baseStartX && thisStartX <= baseEndX && thisStartY >= baseStartY && thisStartY <= baseEndY){ flag = true; }else if(thisStartX >= baseStartX && thisStartX <= baseEndX && thisEndY >= baseStartY && thisEndY <= baseEndY){ flag = true; }else if(thisEndX >= baseStartX && thisEndX <= baseEndX && thisStartY >= baseStartY && thisStartY <= baseEndY){ flag = true; }else if(thisEndX >= baseStartX && thisEndX <= baseEndX && thisEndY >= baseStartY && thisEndY <= baseEndY){ flag = true; } } if(flag){ var direction, distance; if(thisCenterX > baseCenterX){ direction = 'right'; distance = baseEndX - thisStartX + 30; }else{ direction = 'left'; distance = thisEndX - baseStartX + 30; } arr.push({ class : $(this).attr('class'), direction : direction, //移动方向 distance : distance //移动距离 }); } }); //开始移动 for(var i = 0; i < arr.length; i++){ var baseLeft = $('.' + arr[i].class).offset().left; if(arr[i].direction == 'left'){ $('.' + arr[i].class).animate({ left : baseLeft - arr[i].distance }, 300).animate({ left : baseLeft }, 300); }else{ $('.' + arr[i].class).animate({ left : baseLeft + arr[i].distance }, 300).animate({ left : baseLeft }, 300); } } setTimeout(function(){ thisDOM.css('zIndex', zIndex); zIndex += 1; }, 300); }); });
<div class="div1"></div> <div class="div2"></div> <div class="div3"></div>
div{position:absolute;width:200px;height:100px;background:#fff} .div1{top:100px;left:270px;background:red} .div2{top:50px;left:240px;background:blue} .div3{top:75px;left:300px;background:yellow}