js 左右懸浮對(duì)聯(lián)廣告特效代碼
js制作web網(wǎng)頁左右懸浮廣告特效。
引用:
<script src="js/ad.js" type="text/javascript"></script>
2、頁面調(diào)用
<!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網(wǎng)頁左右懸浮廣告特效_www.dbjr.com.cn</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\'">關(guān)閉</a><a ><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\'">關(guān)閉</a><a href="http://www.dbjr.com.cn"><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實(shí)現(xiàn)懸浮移動(dòng)窗口(懸浮廣告)的特效
- JavaScript 懸浮窗口實(shí)現(xiàn)代碼
- JS控制彈出懸浮窗口(一覽畫面)的實(shí)例代碼
- JS實(shí)現(xiàn)自動(dòng)固定頂部的懸浮菜單欄效果
- JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼
- javascript 鼠標(biāo)懸浮圖片顯示原圖 移出鼠標(biāo)后原圖消失(多圖)
- js 固定懸浮效果實(shí)現(xiàn)思路代碼
- js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
- js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果
- javaScript實(shí)現(xiàn)鼠標(biāo)在文字上懸浮時(shí)彈出懸浮層效果
相關(guān)文章
點(diǎn)彈代碼 點(diǎn)擊頁面任何位置都可以彈出頁面效果代碼
有時(shí)候需要點(diǎn)擊頁面任何位置都可以彈出頁面效果,多用于游戲,導(dǎo)航類網(wǎng)站推廣2012-09-09代碼非常簡(jiǎn)潔且兼容多瀏覽器的拖動(dòng)層實(shí)現(xiàn)代碼
代碼非常簡(jiǎn)潔且兼容多瀏覽器的拖動(dòng)層的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-01-01js漂浮廣告實(shí)現(xiàn)代碼(合集經(jīng)典) 符合W3C
js漂浮廣告實(shí)現(xiàn)代碼,實(shí)際上就是一個(gè)來回滾動(dòng)的小圖片,碰到邊緣就返回,也是一種廣告形式,需要的朋友可以收藏下2012-04-04帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng)
這篇文章帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng),響應(yīng)式布局主要是針對(duì)各種不同尺寸的屏幕兼容性問題,需要的朋友可以參考下2023-03-03js實(shí)現(xiàn)完美拖拽效果可拖動(dòng)層與回放拖動(dòng)規(guī)跡并顯示拖動(dòng)距離參數(shù)
一個(gè)完美的JS拖拽功能,實(shí)現(xiàn)層在網(wǎng)頁上任意拖動(dòng),還可回放拖動(dòng)規(guī)跡,而且在拖動(dòng)時(shí)顯示拖動(dòng)距離參數(shù)等相關(guān)屬性。經(jīng)本人測(cè)試兼容性也是相當(dāng)不錯(cuò)的代碼,學(xué)習(xí)JavaScript的朋友,可以拿來研究研究,您可不要錯(cuò)過哦2012-12-12xScrollStick 跟隨滾動(dòng)條漂浮的JS特效
這是一個(gè)跟隨滾動(dòng)條漂浮的JS特效,就是說滾動(dòng)條滾動(dòng)而元素相對(duì)屏幕位置不變,需要的朋友可以測(cè)試下2012-04-04