Maison > interface Web > js tutoriel > le corps du texte

Exemple de partage d'un simple effet de collision flottante à l'aide de JS

小云云
Libérer: 2017-12-29 17:48:47
original
1932 Les gens l'ont consulté

Cet article présente principalement JS pour obtenir un effet de collision flottante simple, similaire à l'effet de la collision d'images flottantes publicitaires sur l'écran. Il implique des techniques connexes d'exploitation dynamique des attributs d'éléments de page en combinaison avec le temps à l'aide de JavaScript. . Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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> 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>
Copier après la connexion

Vous pouvez l'essayer. J'espère que vous pourrez compléter votre propre effet de collision flottante en fonction de celui-ci. les idées ci-dessus.

Recommandations associées :

Exemple détaillé d'implémentation JS de l'effet de collision élastique de petites balles

Implémentation de l'effet de collision basé sur HTML5 et WebGL

Effet de collision de balle à mouvement moléculaire réalisé par jQuery_jquery

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!