Home > Article > Web Front-end > JS implementation of simple floating collision effect example sharing

JS implementation of simple floating collision effect example sharing

小云云Original: 2017-12-29 17:48:471933browse

This article mainly introduces JS to implement a simple floating collision effect, which is similar to the effect of advertising floating pictures colliding back and forth on the screen. It involves related techniques of dynamically operating page element attributes in combination with time using JavaScript. Friends who need it can refer to it. I hope it can Help everyone.

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> 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="http://php.cn/images/logo.gif"/>
</p>
</body>
</html>

You can try it. I hope you can complete your own page floating collision effect based on the above ideas.

Related recommendations:

Detailed example of JS implementation of elastic collision effect of small balls

Implementation of collision effect based on HTML5 and WebGL

Molecular motion ball collision effect implemented by jQuery_jquery

The above is the detailed content of JS implementation of simple floating collision effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

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：bootstrap-table.js adds a method to implement the function of jumping to page xxNext article：bootstrap-table.js adds a method to implement the function of jumping to page xx

See more

JS implementation of simple floating collision effect example sharing

Related articles