javascript碰撞检测

下载代码

html

css

分享到微信朋友圈

html

css

container{position: relative;}
.rectangle-1{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #4CAF50; width: 180px; height: 150px; border-radius: 5px; transition: 0.3s all ease; color: #fff; text-align: center; line-height: 150px; font-size: 25px;}
.rectangle-1.collide{background: #EF5350;}
.rectangle-1:after{content:":-)"; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);}
.rectangle-1.collide:after{content:":-("; }
.rectangle-2{position: absolute; background: #F5B041; width: 100px; height: 100px; border-radius: 5px; z-index: 10; cursor: move; transition: 0.5s box-shadow ease, 0.5s transform ease; transform: translate(0, 0); top: 40%; left: 30%; text-align: center; line-height: 100px; font-size: 17px;}
.rectangle-2.onDrag{box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.2); transform: translate(-3px, -3px);}

html, body{
  user-select: none;
  width: 100%; 
  height: 100%; 
  font-family: 'Roboto', sans-serif;
}
body{
  margin: 0;
  background-color: #1F1F1F;
}

@media only screen and (max-width: 1200px) {
  .projHeader{position: static; transform: translate(0);}
.primaryText{font-weight: 300; font-size: 30px;text-align: center; margin-top: 10px;}
.secondaryText{font-weight: 300; text-align: center; font-size: 20px;}
  .createdBy{font-weight: 300; text-align: center; font-size: 17px; margin-top :5px;}
.createdBy a{color: #000; text-decoration: none; border-bottom: 1px solid #000;}

JavaScript

var dragMe;
window.onload=function(){
  var rect = document.getElementById("rect");
  dragMe = document.getElementById("dragMe");
  
  initDrag({
    element: dragMe,
    start: function(){addShadow();},
    drag: function(){isCollapsed(dragMe, rect);},
    stop: function(){removeShadow();}
  });
}

function addShadow(){
  dragMe.classList.add("onDrag");
}

function removeShadow(){
  dragMe.classList.remove("onDrag");
}

function initDrag(options){
  var element = options.element;
  var mousedown, mouseup, mousemove,
      dragStart, initX, initY,
      offsetLeft, offsetTop;
  
  function mouseMove(ev){
    if(dragStart){
      var newX = offsetLeft + (ev.pageX - initX);
      var newY = offsetTop + (ev.pageY - initY);

element.style.top = newY+"px";
      element.style.left = newX+"px";
      
      options.drag.call();
    }
  }
  
  function mouseUp(ev){
    dragStart = false;
    document.removeEventListener("mousemove", mouseMove, false);
    document.removeEventListener("mouseup", mouseUp, false);
    
    options.stop.call();
  }
  
  function mouseDown(ev){
    initX = ev.pageX;
    initY = ev.pageY;
    dragStart = true;
    offsetLeft = element.offsetLeft;
    offsetTop = element.offsetTop;
    document.addEventListener("mousemove", function(ev){mouseMove(ev)}, false);
    document.addEventListener("mouseup", function(ev){mouseUp(ev)}, false);
    
    options.start.call();
  }
  
  element.addEventListener("mousedown", function(ev){mouseDown(ev)}, false);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg