js 左右悬浮对联广告特效代码


Posted in Javascript onDecember 12, 2014

js制作web网页左右悬浮广告特效。
引用:

<script src="js/ad.js" type="text/javascript"></script>

2、页面调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js制作web网页左右悬浮广告特效_3water.com</title>
<style>
body{font-family:Arial, Helvetica, sans-serif,"宋体"; font-size:12px; height:2000px; color:#667382}
*{ padding:0px; margin:0px;}
ul{margin:0px;padding:0px;}
li{list-style-type:none;margin:0px;padding:0px;}
.fl{ float:left;}
.fr{ float:right;}
.cl{ clear:both;}
.zz {margin-top: 0px;margin-right: auto;margin-bottom: 0px;  margin-left: auto;}
.tc{ text-align:center;}
.jiac{ font-weight:bold;}
.cur{cursor: pointer;}
img{ border:0px;}
</style>
</head>
<body>
<script src="js/ad.js" type="text/javascript"></script>
</body>
</html>

3、js悬浮广告代码 ad.js

var browser={ie6:function(){return((window.XMLHttpRequest==undefined)&&(ActiveXObject!=undefined))},getWindow:function(){var myHeight=0;var myWidth=0;if(typeof(window.innerWidth)=='number'){myHeight=window.innerHeight;myWidth=window.innerWidth}else if(document.documentElement){myHeight=document.documentElement.clientHeight;myWidth=document.documentElement.clientWidth}else if(document.body){myHeight=document.body.clientHeight;myWidth=document.body.clientWidth}return{'height':myHeight,'width':myWidth}},getScroll:function(){var myHeight=0;var myWidth=0;if(typeof(window.pageYOffset)=='number'){myHeight=window.pageYOffset;myWidth=window.pageXOffset}else if(document.documentElement){myHeight=document.documentElement.scrollTop;myWidth=document.documentElement.scrollLeft}else if(document.body){myHeight=document.body.scrollTop;myWidth=document.body.scrollLeft}return{'height':myHeight,'width':myWidth}},getDocWidth:function(D){if(!D)var D=document;return Math.max(Math.max(D.body.scrollWidth,D.documentElement.scrollWidth),Math.max(D.body.offsetWidth,D.documentElement.offsetWidth),Math.max(D.body.clientWidth,D.documentElement.clientWidth))},getDocHeight:function(D){if(!D)var D=document;return Math.max(Math.max(D.body.scrollHeight,D.documentElement.scrollHeight),Math.max(D.body.offsetHeight,D.documentElement.offsetHeight),Math.max(D.body.clientHeight,D.documentElement.clientHeight))}};var dom={ID:function(id){var type=typeof(id);if(type=='object')return id;if(type=='string')return document.getElementById(id);return null},insertHtml:function(html){var frag=document.createDocumentFragment();var div=document.createElement("div");div.innerHTML=html;for(var i=0,ii=div.childNodes.length;i<ii;i++){frag.appendChild(div.childNodes[i])}document.body.insertBefore(frag,document.body.firstChild)}};var myEvent={add:function(element,type,handler){var ele=dom.ID(element);if(!ele)return;if(ele.addEventListener)ele.addEventListener(type,handler,false);else if(ele.attachEvent)ele.attachEvent("on"+type,handler);else ele["on"+type]=handler},remove:function(element,type,handler){var ele=dom.ID(element);if(!ele)return;if(ele.removeEventListener)ele.removeEventListener(type,handler,false);else if(ele.detachEvent)ele.detachEvent("on"+type,handler);else ele["on"+type]=null}};var position={rightCenter:function(id){var id=dom.ID(id);var ie6=browser.ie6();var win=browser.getWindow();var ele={'height':id.clientHeight,'width':id.clientWidth};if(ie6){var scrollBar=browser.getScroll()}else{var scrollBar={'height':0,'width':0};id.style.position='fixed'}ele.top=parseInt((win.height-ele.height)/2+scrollBar.height);id.style.top=ele.top+'px';id.style.right='3px'},floatRightCenter:function(id){position.rightCenter(id);var fun=function(){position.rightCenter(id)};if(browser.ie6()){myEvent.add(window,'scroll',fun);myEvent.add(window,'resize',fun)}else{myEvent.add(window,'resize',fun)}},leftCenter:function(id){var id=dom.ID(id);var ie6=browser.ie6();var win=browser.getWindow();var ele={'height':id.clientHeight,'width':id.clientWidth};if(ie6){var scrollBar=browser.getScroll()}else{var scrollBar={'height':0,'width':0};id.style.position='fixed'}ele.top=parseInt((win.height-ele.height)/2+scrollBar.height);id.style.top=ele.top+'px';id.style.left='3px'},floatLeftCenter:function(id){position.leftCenter(id);var fun=function(){position.leftCenter(id)};if(browser.ie6()){myEvent.add(window,'scroll',fun);myEvent.add(window,'resize',fun)}else{myEvent.add(window,'resize',fun)}}};
function ad_left(){
  var html;
  html = '<div id="ad_left" style="position:absolute;width:130px;height:300px;z-index:10001"><a style="position:absolute;top:-15px;left:0;" href="javascript:void(0);" onclick="document.getElementById(\'ad_left\').style.display=\'none\'">关闭</a><a href="http://www.plchome.org"><img src="images/ad.jpg" width="130" height="300" /></a></div>';
  dom.insertHtml(html);position.floatLeftCenter('ad_left');
}
function ad_right(){
  var html;
  html = '<div id="ad_right" style="position:absolute;width:130px;height:300px;z-index:10001"><a style="position:absolute;top:-15px;right:0;" href="javascript:void(0);" onclick="document.getElementById(\'ad_right\').style.display=\'none\'">关闭</a><a href="https://3water.com"><img src="images/ad.jpg" width="130" height="300" /></a></div>';
  dom.insertHtml(html);position.floatRightCenter('ad_right');
}
myEvent.add(window,'load',ad_left);
myEvent.add(window,'load',ad_right);

完成。

Javascript 相关文章推荐
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
vue服务端渲染添加缓存的方法
Sep 18 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 #Javascript
js中document.write的那点事
Dec 12 #Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 #Javascript
jQuery实现瀑布流布局
Dec 12 #Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 #Javascript
js 左右悬浮对联广告代码示例
Dec 12 #Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 #Javascript
You might like
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
什么是方法的重载
2013/06/24 面试题
2014年会演讲稿范文
2014/01/06 职场文书
战略合作意向书
2014/07/29 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
详解Python为什么不用设计模式
2021/06/24 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript