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 相关文章推荐
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
重写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代码
2008/04/09 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python绘制数码晶体管日期
2021/02/19 Python
关于环保的建议书400字
2014/03/12 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
教师个人师德总结
2015/02/06 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
初中历史教学反思
2016/02/19 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python