この記事では、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プログラミングに役立つことを願っています。