집 > 기사 > 웹 프론트엔드 > JS는 닫을 수 있는 커플릿 광고 효과 code_javascript 기술을 구현합니다.

JS는 닫을 수 있는 커플릿 광고 효과 code_javascript 기술을 구현합니다.

WBOY원래의: 2016-05-16 15:39:261171검색

이 기사의 예에서는 닫을 수 있는 커플릿 광고 효과 코드의 JS 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

닫기 버튼이 있는 아주 고전적인 커플 광고 코드입니다. 또한 사용자가 직접 광고를 끌 수 있으며, 스크롤 막대가 변경되면, 즉 브라우저를 드래그하면 광고의 세로 위치가 자동으로 지정됩니다. 스크롤바 광고는 항상 표시되고 숨겨지지 않습니다. 요즘에는 많은 웹사이트에서 커플 광고 코드를 사용하고 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/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显示器分辨率宽度小于"+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 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：js는 액세스가 검색 엔진(Spider)에서 오는지 아니면 직접 access_javascript 기술에서 오는지 어떻게 결정합니까?다음 기사：js는 액세스가 검색 엔진(Spider)에서 오는지 아니면 직접 access_javascript 기술에서 오는지 어떻게 결정합니까?

JS는 닫을 수 있는 커플릿 광고 효과 code_javascript 기술을 구현합니다.

관련 기사