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


Posted in Javascript onJanuary 08, 2016

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

效果图:

基于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程序设计有所帮助。

Javascript 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
js取模(求余数)隔行变色
May 15 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
javascript关于继承解析
May 10 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
jQuery自定义滚动条完整实例
Jan 08 #Javascript
javascript正则表达式定义(语法)总结
Jan 08 #Javascript
You might like
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP常用的小程序代码段
2015/11/14 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
Python 连连看连接算法
2008/11/22 Python
Python切片用法实例教程
2014/09/08 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Python实现AI换脸功能
2020/04/10 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
深入分析python 排序
2020/08/24 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
为什么要使用servlet
2016/01/17 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
外语专业毕业生自我评价分享
2013/10/05 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技