Beispiel für die gemeinsame Nutzung eines einfachen schwebenden Kollisionseffekts mit JS-js-Tutorial-php.cn

Beispiel für die gemeinsame Nutzung eines einfachen schwebenden Kollisionseffekts mit JS

小云云

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

Original

1883 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich JS vorgestellt, um einen einfachen schwebenden Kollisionseffekt zu erzielen, der dem Effekt von auf dem Bildschirm hin und her kollidierenden Werbebildern ähnelt. Dabei handelt es sich um verwandte Techniken zur dynamischen Bearbeitung von Seitenelementattributen in Kombination mit der Zeit mithilfe von JavaScript . Freunde, die es brauchen, können darauf verweisen. Ich hoffe, es kann allen helfen.

Das Beispiel in diesem Artikel beschreibt, wie man einen einfachen schwebenden Kollisionseffekt in JS implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<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>

Nach dem Login kopieren

Sie können es ausprobieren. Ich hoffe, Sie können Ihren eigenen schwebenden Kollisionseffekt basierend darauf vervollständigen die oben genannten Ideen.

Verwandte Empfehlungen:

Detailliertes Beispiel für die JS-Implementierung des elastischen Kollisionseffekts kleiner Kugeln

Implementierung des Kollisionseffekts basierend auf HTML5 und WebGL

Molekularer Bewegungsball-Kollisionseffekt implementiert durch jQuery_jquery

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung eines einfachen schwebenden Kollisionseffekts mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!