Home > Article > Web Front-end > How to implement floating collision in JS

How to implement floating collision in JS

亚连Original: 2018-06-14 16:29:031946browse

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>

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!

JavaScript jquery vue.js JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to control the mouse to refuse to click the button in JSNext article：How to control the mouse to refuse to click the button in JS

See more

How to implement floating collision in JS

Related articles