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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
重写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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JavaScript编写推箱子游戏
2015/07/07 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
javascript实现下拉菜单效果
2021/02/09 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
廉政教育的心得体会
2014/09/01 职场文书
医学检验专业自荐信
2014/09/18 职场文书