この記事では、JSによって実装された単純な画像フローティング効果について説明します。次のように、参照のために共有してください。
ウィンドウオブジェクトを使用して、画像の浮動効果を実現する
1.私たちが制御したい広告divがあり、その出発点（0,0）があります
2.水平速度と垂直速度を設定します
3。コントロールAD DIVモバイル
1）AD DIVが境界に達するかどうか
2）境界に到達した場合、速度を逆に移動するように設定します
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> untteld document </title> <style> <style;} img {position;フィルター：アルファ（不透明= 100）;/* ie*/-moz -opacity：1;/* moz + ff*/ofacity：1;/* css3（ff 1.5もサポートする）*/} </style> </head> <body> <div id = "divimg"> type = "text/javascript"> //画像がvar img = document.getElementById（ "divimg"）; // divの左上隅の座標を設定します。開始点の座標var x = 10、y = 10; //画像の移動速度を設定するvar xspeed = 2、yspeed = 1; //画像の最大浮動高さと幅を設定しますvar w = document.documentlement.clientwidth-10、h = document.documentelement.clientheight-160; function floatimg（）{//画像ディスクが境界に到達するかどうかを比較//境界に到達すると、（x> w || x <0）{xspeed = -xspeed; } if（y> h || y <0）{yspeed = -yspeed; } //境界に到達しない場合、画像の左上隅の座標を設定します//座標値開始座標 +速度 + = xspeedを設定します。 y+= yspeed; img.style.top = y+"px"; img.style.left = x+"px"; // function floatimg（）を呼び出し、settimeout（ "floatimg（）"）、40）を呼び出します。 } floatimg（）; </script> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。