本文實例講述了JS實現可關閉的對聯廣告效果代碼。分享給大家供大家參考。具體如下：
這是非常經典的一款對聯廣告代碼，帶有關閉按鈕，用戶可以自行關掉廣告，另外，廣告的垂直位置會隨著滾動條的變化自動定位，也就是拖動瀏覽器滾動條的時候廣告始終顯示，不會被隱藏掉，現在很多網站都在用的對聯廣告代碼。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-close-able-2adv-style-codes/
具體代碼如下：
<html><head><title>對聯廣告</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">頁面區域</div></td> </tr> </table> </center></div><SCRIPT LANGUAGE="JavaScript"><!--var showad = true;var Toppx = 60;//上端位置var AdDivW = 100;//寬度var AdDivH = 360;//高度var PageWidth = 800;//這個參數決定是否出現左右滾動條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>內<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程序設計有所幫助。
新聞熱點
疑難解答
