基于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 相关文章推荐
JS实现切换标签页效果实例代码
Nov 01 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
原生js实现吸顶效果
Mar 13 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
详解vue几种主动刷新的方法总结
Feb 19 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
php Undefined index的问题
2009/06/01 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
vuex的简单使用教程
2018/02/02 Javascript
详解JS预解析原理
2020/06/16 Javascript
Vue性能优化的方法
2020/07/30 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python利用IPython提高开发效率
2016/08/10 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python3 下载网络图片代码实例
2019/08/27 Python
Python3如何判断三角形的类型
2020/04/12 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
教师对学生的评语
2014/04/28 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
党员四风剖析材料
2014/08/27 职场文书
行政前台岗位职责
2015/04/16 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Docker官方工具docker-registry案例演示
2022/04/13 Servers