基于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 格式字符串的应用
Mar 29 Javascript
js取得url地址参数实例
Feb 22 Javascript
js字符串转成JSON
Nov 07 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
vue 内联样式style中的background用法说明
Aug 05 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
js中判断控件是否存在
2010/08/25 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解AngularJS controller调用factory
2017/05/19 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
js实现简单进度条效果
2020/03/25 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python实现扫雷小游戏
2020/04/24 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
会计专业毕业自荐书范文
2014/02/08 职场文书
大学活动总结范文
2014/04/29 职场文书
农业生产宣传标语
2014/10/08 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2014年车间工作总结
2014/11/21 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技