Maison >interface Web >js tutoriel >Implémenter un effet de publicité flottante dans le coin inférieur droit en fonction des compétences javascript_javascript
L'exemple de cet article partage avec vous l'effet de la publicité flottante dans le coin inférieur droit basé sur javascript pour votre référence. Le contenu spécifique est le suivant
.Rendu :
Code spécifique :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript"> window.onload = getMsg; window.onresize = resizeDiv; window.onerror = function(){} function $(id) {return document.getElementById(id);} //短信提示使用(asilas添加) var divT,divL,divW,divH,docH,docW,docST,docSL,objTimer,i = 0; function getMsg() { try{ divT = parseInt($("eMeng").style.top,10); //层top位置 divL = parseInt($("eMeng").style.left,10); //层left位置 divH = parseInt($("eMeng").offsetHeight,10);//层宽 divW = parseInt($("eMeng").offsetWidth,10);//层高 docW = document.documentElement.clientWidth;//窗口宽 docH = document.documentElement.clientHeight;//窗口高 docST=document.documentElement.scrollTop; docSL=document.documentElement.scrollLeft; $("eMeng").style.top = parseInt(docST,10) + docH + 10+"px"; $("eMeng").style.left = parseInt(docSL,10) + docW - divW+"px"; $("eMeng").style.visibility="visible"; objTimer = setInterval("moveDiv()",10); } catch(e){} } function resizeDiv() { try{ divH = parseInt($("eMeng").offsetHeight,10); divW = parseInt($("eMeng").offsetWidth,10); docW = document.documentElement.clientWidth; docH = document.documentElement.clientHeight; $("eMeng").style.top = docH - divH + parseInt(document.documentElement.scrollTop,10)+"px"; $("eMeng").style.left = docW - divW + parseInt(document.documentElement.scrollLeft,10)+"px"; } catch(e){} } function moveDiv() { try{ if(parseInt($("eMeng").style.top,10) <= (docH - divH + parseInt(document.documentElement.scrollTop,10))) { window.clearInterval(objTimer) objTimer = setInterval("resizeDiv()",1) } divT = parseInt($("eMeng").style.top,10); $("eMeng").style.top = divT - 1+"px"; } catch(e){} } function closeDiv() { $('eMeng').style.visibility='hidden'; if(objTimer) window.clearInterval(objTimer) } </script> <div id="eMeng" style="z-index: 99999; visibility:hidden; left: 0px; width: 252px; position: absolute; top: 0px; height: 213px; background:url(http://image.5fad.com/5/img/ad_bg.gif)"> <div style=" height:28px"> <div style=" width:20px; height:20px; float:right; margin:5px 5px 0 0; cursor:pointer" onclick="closeDiv()"></div> </div> <div style="width:225px; height:164px; margin:0 auto;"><a href="http://5.5fad.com/star/pur_detial.aspx?news=138" target="_blank"><img src="http://image.5fad.com/5/ad/ad01.jpg" width="225" height="164" border="0" /></a></div> </div> </body> </html>
J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.