一段 js 左右悬浮广告特效代码,js 制作 web 网页左右悬浮广告特效,左右悬浮广告通常也称为对联广告,需要的朋友参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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网页左右悬浮广告特效_www.phperz.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="http://www.phperz.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);
完成。
来源: