Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung eines einfachen schwebenden Kollisionseffekts mit JS

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

小云云Original: 2017-12-29 17:48:471927Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Bootstrap-table.js fügt eine Methode hinzu, um die Funktion zum Springen zu Seite xx zu implementierenNächster Artikel：Bootstrap-table.js fügt eine Methode hinzu, um die Funktion zum Springen zu Seite xx zu implementieren

In Verbindung stehende Artikel

Mehr sehen