基于javascript实现右下角浮动广告效果

2019-11-20 10:50:16

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了基于javascript实现右下角浮动广告效果，供大家参考，具体内容如下

效果图：

具体代码：

<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>

希望本文所述对大家学习javascript程序设计有所帮助。

上一篇：jQuery抛物线运动实现方法(附完整demo源码下载)

下一篇：jQuery数据类型小结(14个)