Maison > Article > interface Web > Comment implémenter une collision flottante dans JS

Comment implémenter une collision flottante dans JS

亚连original: 2018-06-14 16:29:031949parcourir

Cet article présente principalement JS pour obtenir un simple effet de collision flottante, qui est similaire à l'effet de la collision d'images flottantes publicitaires sur l'écran. Il implique des techniques connexes de manipulation dynamique des attributs d'éléments de page avec JavaScript combinées avec le temps. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit comment implémenter un simple effet de collision flottante dans JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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

Effet de l'opération :

Ce qui précède est ce que j'ai compilé pour tout le monde, J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser vue.js pour se rendre compte que la boîte pop-up n'est jouée qu'une seule fois

Interprétation détaillée de l'arbre de préfixes trie en javascript

Interprétation détaillée du code todoMVC dans Vue

Comment ajouter dynamiquement et obtenir le nom du style dans jquery

Comment implémenter la communication entre composants parent-enfant dans Angular2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery vue.js JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment contrôler la souris pour refuser de cliquer sur le bouton en JSArticle suivant：Comment contrôler la souris pour refuser de cliquer sur le bouton en JS

Articles Liés

Voir plus