JS는 클릭하여 확장하고 close_javascript 기술을 사용할 수 있는 왼쪽 광고 코드를 구현합니다.-JS 튜토리얼-php.cn

JS는 클릭하여 확장하고 close_javascript 기술을 사용할 수 있는 왼쪽 광고 코드를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:40:57

원래의

1239명이 탐색했습니다.

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

여기서 소개하는 것은 웹페이지에서 클릭하면 펼쳐지고 닫힐 수 있는 왼쪽 광고 코드의 JS 구현입니다. 성능은 커플렛 광고와 비슷하지만 클릭하면 작동 방법이 다릅니다. 화면 왼쪽에 숨겨져 있지만 완전히 숨겨지지는 않습니다. 세로 이미지 막대로 광고를 표시하고 '표시'를 클릭하면 광고가 다시 열립니다. 이러한 종류의 광고는 사용자 경험을 향상시킬 수 있습니다. 웹 페이지.

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

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

http://demo.jb51.net/js/2015/js-click-show-close-style-adv-codes/

구체적인 코드는 다음과 같습니다.

<!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">
<head>
<title>网页上可点击展开、关闭的左侧广告代码</title>
</head>
<body>
<div id="Bar1190_big" style="position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;">
<div id="AD1190" style="width:100px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="100" height="300" src="images/2401.jpg" alt="" border="0"></a>
</div>
<div style="height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_hidden()">关 闭</a> 
</div>
</div>
<div id="Bar1190_small" style="position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;">
<div id="AD1190" style="width:20px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="25px" height="300" src="images/2402.jpg" alt="" border="0"></a>
</div>
<div style="height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_show()">展开</a>
</div>
</div>
<script type="text/javascript">
function bar1190_show(){
document.getElementById('Bar1190_big').style.display='';
document.getElementById('Bar1190_small').style.display='none';
}
function bar1190_hidden(){
document.getElementById('Bar1190_big').style.display='none';
document.getElementById('Bar1190_small').style.display='';
}
var autohide1190 = setTimeout("bar1190_hidden()",6000);
</script>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.