基于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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
js Date概念详细介绍
Nov 22 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP之header函数详解
2021/03/02 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
详解vue的数据binding绑定原理
2017/04/12 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python中的django是做什么的
2020/07/31 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
教师求职信范文
2014/05/24 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS