ホームページ >ウェブフロントエンド >jsチュートリアル >Web サイトのフローティング広告を実装するための JS コード
この記事では、主に Web サイトのフローティング広告を実装するための JS コードを紹介します。まずはレンダリングをご覧ください。
写真の通り
黄色いブロックがぶつかってブラウザの上下左右に移動します 閉じることができ、マウスを上に動かすと止まります
<!doctype html> <html> <he> <meta charset="utf-8"> <title>广告</title> <style type="text/css"> *{ pding:0px; margin:0px; } #ad{ position:absolute; left:0px; top:0px; width:200px; height:50px; line-height:50px; text-align:center; color:black; background-color:orange; border-rius: 2%; } </style> </he> <body> <p id="ad">广告位招商</p> </body> <script type="text/javascript"> //获取img ad=document.getElementById("ad"); //初始化横坐标 x=0; //设置纵坐标 y=0; //设置加速度 yv=10; xv=10; function fun(){ //范围 //左右 if(x<0||x>window.innerWidth-ad.offsetWidth){ xv=-xv; } //上下 if(y<0||y>window.innerHeight-ad.offsetHeight){ yv=-yv; } x+=xv; y+=yv; //获取到的x值赋值给ad的left ad.style.left=x+"px"; //获取到的y值赋值给ad的top ad.style.top=y+"px"; } mytime=setInterval(fun,100); //给ad绑定鼠标移入事件 ad.onmouseover=function(){ //清除定时器 clearInterval(mytime); } //鼠标移出 ad.onmouseout=function(){ mytime=setInterval(fun,100); } </script> </html>
関連する推奨事項:
JS はフローティング モバイル ウィンドウ (フローティング広告) を実装します 特殊効果
以上がWeb サイトのフローティング広告を実装するための JS コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。