js 左右悬浮广告特效代码_网页特效 - 脚本学堂

php实例 shell脚本 jquery选择器 python模拟登录 linux命令 nginx apache

当前位置：首页 > 脚本编程 > 网页特效 > 正文

js 左右悬浮广告特效代码: 发布时间：2020-06-02编辑：脚本学堂

一段js 左右悬浮广告特效代码，js制作web网页左右悬浮广告特效，左右悬浮广告通常也称为对联广告，需要的朋友参考下。

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.jb200.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.plchome.org"><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);

上一篇：js 左右悬浮广告代码示例
下一篇：js QQ客服悬浮特效代码实例

与 js 左右悬浮广告特效代码有关的文章

本文标题：js 左右悬浮广告特效代码
本页链接：http://www.jb200.com/js_texiao/28187.htm

浏览排行

栏目分类

热点文章