ホームページ > 記事 > ウェブフロントエンド > JSを使用した単純なフローティングコリジョンエフェクトの共有例
この記事では主に、画面上で前後に衝突する広告のフローティング コリジョン エフェクトに似た単純なフローティング コリジョン エフェクトを実装するための JS を紹介します。これには、JavaScript と時間を組み合わせてページ要素の属性を動的に操作する関連テクニックが含まれます。必要な方はぜひ参考にしてください。
この記事の例では、JS で単純なフローティングコリジョンエフェクトを実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
<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('a.jpg');background-size:cover; background-repeat:no-repeat*/"> <p id="sunp" style="position:absolute"> <img src="http://php.cn/images/logo.gif"/> </p> </body> </html>
試してみてください。上記のアイデアに基づいて、独自のページのフローティングコリジョンエフェクトを完成できることを願っています。
関連おすすめ:
以上がJSを使用した単純なフローティングコリジョンエフェクトの共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。