xml地图|网站地图|网站标签 [设为首页] [加入收藏]

CSS实现带有碰撞缓冲效果的竖向导航条代码,j

来源:http://www.ccidsi.com 作者:集成介绍 人气:105 发布时间:2019-08-28
摘要:协调做了碰撞检查测量检验的卷入,先看下实例demo,在看包装 正文实例陈述了JavaScript拖拽、碰撞、重力及弹性运动完结格局。分享给大家供我们参谋,具体如下: 正文实例呈报了JS CSS实

协调做了碰撞检查测量检验的卷入,先看下实例demo,在看包装

正文实例陈述了JavaScript拖拽、碰撞、重力及弹性运动完结格局。分享给大家供我们参谋,具体如下:

正文实例呈报了JS CSS实现带有碰撞缓冲效果的竖向导航条代码。分享给我们供大家参谋。具体如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>碰撞检测</title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #divA,#divB{
  width: 200px;
  height: 200px;
  background-color: purple;
  font-size: 50px;
  line-height: 200px;
  text-align: center;
  position: absolute;
  color: #fff;
  }
  #divA{
  left: 30px;
  top: 30px;
  z-index: 5;
  }
  #divB{
  left: 300px;
  top: 300px;
  }
 </style>
 </head>
 <body>
 <div id="divA">A</div>
 <div id="divB">B</div>
 </body>
 <script type="text/javascript">
 var divA = document.getElementById("divA");
 var divB = document.getElementById("divB");


 divA.onmousedown = function (e) {

  var event1 = window.event || e;


  var startX = event1.clientX;

  var startY = event1.clientY;

  document.onmousemove = function (j) {

  var event2 = window.event || j;

  var endX = event2.clientX;
  var endY = event2.clientY;

  divA.style.left = divA.offsetLeft   (endX - startX)   "px";
  divA.style.top = divA.offsetTop   (endY - startY)   "px";

  startX = endX;
  startY = endY;

  if (isCrash(divA,divB) == true) {

   divA.style.backgroundColor = "red";
  } else{

   divA.style.backgroundColor = "purple";
  };
  }
 }


 divA.onmouseup = function () {

  document.onmousemove = null;
 }


 function isCrash (obj1,obj2) {

  var boolCrash = true;

  var left1 = obj1.offsetLeft;

  var right1 = obj1.offsetLeft   obj1.offsetWidth;

  var top1 = obj1.offsetTop;

  var bottom1 = obj1.offsetTop   obj1.offsetHeight;

  var left2 = obj2.offsetLeft;

  var right2 = obj2.offsetLeft   obj2.offsetWidth;

  var top2 = obj2.offsetTop;

  var bottom2 = obj2.offsetTop   obj2.offsetHeight;


  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }

 </script>
</html>

js拖拽、碰撞与引力达成代码:

这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂贡献给我们的创作,很不错的竖向菜单,希望大家喜欢。所用才具是JS和CSS。

函数封装

window.onload=function ()
{
 var oDiv=document.getElementById('div1');
 var lastX=0;
 var lastY=0;
 oDiv.onmousedown=function (ev)
 {
 var oEvent=ev||event;
 var disX=oEvent.clientX-oDiv.offsetLeft;
 var disY=oEvent.clientY-oDiv.offsetTop;
 document.onmousemove=function (ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-disX;
  var t=oEvent.clientY-disY;
  oDiv.style.left=l 'px';
  oDiv.style.top=t 'px';
  iSpeedX=l-lastX;
  iSpeedY=t-lastY;
  lastX=l;
  lastY=t;
  document.title='x:' iSpeedX ', y:' iSpeedY;
 };
 document.onmouseup=function ()
 {
  document.onmousemove=null;
  document.onmouseup=null;
  startMove();
 };
 clearInterval(timer);
 };
};
var timer=null;
var iSpeedX=0;
var iSpeedY=0;
function startMove()
{
 clearInterval(timer);
 timer=setInterval(function (){
 var oDiv=document.getElementById('div1');
 iSpeedY =3;
 var l=oDiv.offsetLeft iSpeedX;
 var t=oDiv.offsetTop iSpeedY;
 if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
 {
  iSpeedY*=-0.8;
  iSpeedX*=0.8;
  t=document.documentElement.clientHeight-oDiv.offsetHeight;
 }
 else if(t<=0)
 {
  iSpeedY*=-1;
  iSpeedX*=0.8;
  t=0;
 }
 if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
 {
  iSpeedX*=-0.8;
  l=document.documentElement.clientWidth-oDiv.offsetWidth;
 }
 else if(l<=0)
 {
  iSpeedX*=-0.8;
  l=0;
 }
 if(Math.abs(iSpeedX)<1)
 {
  iSpeedX=0;
 }
 if(Math.abs(iSpeedY)<1)
 {
  iSpeedY=0;
 }
 if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
 {
  clearInterval(timer);
  alert('停止');
 }
 else
 {
  oDiv.style.left=l 'px';
  oDiv.style.top=t 'px';
 }
 document.title=iSpeedX;
 }, 30);
}

运作效果截图如下:

 function isCrash (obj1,obj2) {

  var boolCrash = true;//假设true为碰撞

  var left1 = obj1.offsetLeft;

  var right1 = obj1.offsetLeft   obj1.offsetWidth;

  var top1 = obj1.offsetTop;

  var bottom1 = obj1.offsetTop   obj1.offsetHeight;

  var left2 = obj2.offsetLeft;

  var right2 = obj2.offsetLeft   obj2.offsetWidth;

  var top2 = obj2.offsetTop;

  var bottom2 = obj2.offsetTop   obj2.offsetHeight;


  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }

js弹性运动完结代码:

图片 1

本文由68399皇家赌场发布于集成介绍,转载请注明出处:CSS实现带有碰撞缓冲效果的竖向导航条代码,j

关键词: 68399皇家赌场

最火资讯