How to implement floating collision in JS-JS Tutorial-php.cn

How to implement floating collision in JS

亚连

Release： 2018-06-14 16:29:03

Original

1994 people have browsed it

This article mainly introduces the JS implementation of a simple floating collision effect, which is similar to the effect of advertising floating images colliding back and forth on the screen. It involves related techniques for dynamically operating page element attributes using JavaScript combined with time. Friends who need it can refer to it

The example in this article describes how to implement a simple floating collision effect in JS. Share it with everyone for your reference, the details are as follows:

<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net JS碰撞效果</title>
<script language="javascript">
<!--
    directX=1; //X轴方向
    directY=1; //Y轴方向
    sunX=0;
    sunY=0;
  function sunMov(){
    //定两个方向
    sunX+=directX*2;
    sunY+=directY*2;
    //修改p的left top
    sunp.style.top=sunY+"px";
    sunp.style.left=sunX+"px";
    //判断什么时候，转变方向
    //x方向(offestWidth可以返回，当前这个对象的实际宽度)
    if(sunX+sunp.offsetWidth>=document.body.clientWidth || sunX<=0){
      directX=-directX;
    }
    if(sunY+sunp.offsetHeight>=document.body.clientHeight || sunY<=0){
      directY=-directY;
    }
  }
  setInterval("sunMov()",10);
//-->
</script>
</head>
<body style="/*background-image:URL(&#39;a.jpg&#39;);background-size:cover; background-repeat:no-repeat*/">
<p id="sunp" style="position:absolute">
<img src="//www.jb51.net/images/logo.gif"/>
</p>
</body>
</html>

Copy after login

Operation effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

How to use vue.js to realize that the bullet box only bounces once

Detailed interpretation of the trie prefix tree in javascript

Detailed interpretation of todoMVC code in Vue

How to dynamically add and get the style name in jquery

How to implement parent-child component communication in Angular2

The above is the detailed content of How to implement floating collision in JS. For more information, please follow other related articles on the PHP Chinese website!