JS implementation of simple floating collision effect example sharing-JS Tutorial-php.cn

JS implementation of simple floating collision effect example sharing

小云云

Release： 2017-12-29 17:48:47

Original

1933 people have browsed it

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>

Copy after login

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!