JS實現(xiàn)可關閉的對聯(lián)廣告效果代碼
本文實例講述了JS實現(xiàn)可關閉的對聯(lián)廣告效果代碼。分享給大家供大家參考。具體如下:
這是非常經(jīng)典的一款對聯(lián)廣告代碼,帶有關閉按鈕,用戶可以自行關掉廣告,另外,廣告的垂直位置會隨著滾動條的變化自動定位,也就是拖動瀏覽器滾動條的時候廣告始終顯示,不會被隱藏掉,現(xiàn)在很多網(wǎng)站都在用的對聯(lián)廣告代碼。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-close-able-2adv-style-codes/
具體代碼如下:
<html> <head> <title>對聯(lián)廣告</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body style="margin:0px;"> <div align="center"> <center> <table border="1" width="776" height="3000" cellspacing="0" cellpadding="0"> <tr> <td width="100%" valign="top"><div align="center">頁面區(qū)域</div></td> </tr> </table> </center> </div> <SCRIPT LANGUAGE="JavaScript"> <!-- var showad = true; var Toppx = 60;//上端位置 var AdDivW = 100;//寬度 var AdDivH = 360;//高度 var PageWidth = 800;//這個參數(shù)決定是否出現(xiàn)左右滾動條 var MinScreenW = 1024; //顯示廣告的最小屏幕寬度象素 var ClosebuttonHtml = '<div align="right" style="position: absolute;top:0px;right:0px;margin:2px;padding:2px;z-index:2000;"><a href="javascript:;" onclick="hidead()" style="color:red;text-decoration:none;font-size:12px;">關閉</a></div>' var AdContentHtml = '<div align="center"><br><br>廣<br>告<br>內(nèi)<br>容</div>'; document.write ('<div id="Javascript.LeftDiv" style="position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:'+AdDivW+'px;height:'+AdDivH+'px;top:-1000px;word-break:break-all;display:none;">'+ClosebuttonHtml+'<div>'+AdContentHtml+'</div></div>'); document.write ('<div id="Javascript.RightDiv" style="position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:'+AdDivW+'px;height:'+AdDivH+'px;top:-1000px;word-break:break-all;display:none;">'+ClosebuttonHtml+'<div>'+AdContentHtml+'</div></div>'); function scall(){ if(!showad){return;} if (window.screen.width<MinScreenW){ alert("臨時提示:\n\n顯示器分辨率寬度小于"+MinScreenW+",不顯示廣告"); showad = false; document.getElementById("Javascript.LeftDiv").style.display="none"; document.getElementById("Javascript.RightDiv").style.display="none"; return; } var Borderpx = ((window.screen.width-PageWidth)/2-AdDivW)/2; document.getElementById("Javascript.LeftDiv").style.display=""; document.getElementById("Javascript.LeftDiv").style.top=document.body.scrollTop+Toppx; document.getElementById("Javascript.LeftDiv").style.left=document.body.scrollLeft+Borderpx; document.getElementById("Javascript.RightDiv").style.display=""; document.getElementById("Javascript.RightDiv").style.top=document.body.scrollTop+Toppx; document.getElementById("Javascript.RightDiv").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.RightDiv").offsetWidth-Borderpx; } function hidead() { showad = false; document.getElementById("Javascript.LeftDiv").style.display="none"; document.getElementById("Javascript.RightDiv").style.display="none"; } window.onscroll=scall; window.onresize=scall; window.onload=scall; //--> </SCRIPT> </body> </html>
希望本文所述對大家的JavaScript程序設計有所幫助。
相關文章
解析利用javascript如何判斷一個數(shù)為素數(shù)
本文主要分享了利用javascript如何判斷一個數(shù)為素數(shù)的具體實例代碼,有需要的朋友可以作為參考看下2016-12-12JavaScript模塊規(guī)范之AMD規(guī)范和CMD規(guī)范
本篇文章給大家介紹js模塊規(guī)范之AMD規(guī)范和CMD規(guī)范,模塊化是一種處理復雜系統(tǒng)分解為代碼結構更合理,可維護性更高的可管理的模塊的方式,對js amd cmd規(guī)范感興趣的童鞋可以來本文學習2015-10-10javascript高級模塊化require.js的具體使用方法
本篇文章主要介紹了javascript高級模塊化require.js的具體使用方法,非常具有實用價值,需要的朋友可以參考下2017-10-10Bootstrap下拉菜單更改為懸停(hover)觸發(fā)的方法
這篇文章主要為大家詳細介紹了Bootstrap下拉菜單更改為懸停(hover)觸發(fā)的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05