Heim > Artikel > Web-Frontend > So implementieren Sie eine schwebende Kollision in JS

So implementieren Sie eine schwebende Kollision in JS

亚连Original: 2018-06-14 16:29:031949Durchsuche

In diesem Artikel wird hauptsächlich JS vorgestellt, um einen einfachen schwebenden Kollisionseffekt zu implementieren, der dem Effekt von schwebenden Werbebildern ähnelt, die auf dem Bildschirm hin und her kollidieren. Dabei handelt es sich um verwandte Techniken zur dynamischen Manipulation von Seitenelementattributen mit Javascript in Kombination mit der Zeit. Freunde in Not können sich darauf beziehen

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

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

Operationseffekt:

Ich hoffe, das Obige ist für alle zusammengestellt Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Wie man mit vue.js erkennt, dass das Popup-Fenster nur einmal abgespielt wird

Detaillierte Interpretation von der Trie-Präfixbaum in Javascript

Detaillierte Interpretation des todoMVC-Codes in Vue

Wie man den Stilnamen in JQuery dynamisch hinzufügt und abruft

So implementieren Sie die Eltern-Kind-Komponentenkommunikation in Angular2

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine schwebende Kollision in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery vue.js JS

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：So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigernNächster Artikel：So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern

In Verbindung stehende Artikel

Mehr sehen